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.
-
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>
-
Loop through your beer dataset prior to handing it off to Vue and call the timesAddedBeer function and add that value to your dataset.
π€Stephen Hallgren
Source:stackexchange.com