[Vuejs]-Combining vuejs v-repeat and php foreach loop?

2πŸ‘

βœ…

I don’t think you can (or should) code the way that you are trying to code. Since you have the beer dataset in Vue I’d suggest two options that you could take.

  1. Dynamically load the beer count within Vue by hitting an AJAX endpoint (this would be my preferred way if option #2 is too expensive of an operation).

    <div class="search-item" v-repeat="set: beers | chunk 4">
        <div class="row">
            <!-- Cycle through the data in "beer" -->
            <div v-repeat="beer: set">
                <div class="col-md-3">
                    <h2>@{{{ beer.name }}}</h2>
    
                    @{{ timesAdded(beer.id) }}
                </div><!-- /.col-md-3 -->
            </div><!-- v-repeat -->
        </div><!-- /.row -->
    </div><!-- /.search-item -->
    
    <script>
    // This is Psuedocode for example's sake
    timesAddedBeer: function (id) {
        // Find the beer that we need by its id and return timesadded if it exists
        if (beer[id].timesAdded) return beer[id].timesAdded;
        // If timesadded doesn't exist lets get it and set it
        // this *should* trigger a data refresh and updated the html with the count
        $.post(id, 'endpoint', function(respone) {
            this.$set(beer[id].timesAdded, response.timesAdded);
        });
    }
    </script>
    
  2. Loop through your beer dataset prior to handing it off to Vue and call the timesAddedBeer function and add that value to your dataset.

Leave a comment