Combining vuejs v-repeat and php foreach loop?

Question

I am currently using vue.js to echo out a bunch of items with its v-repeat functionality. Unfortunately I also need to run a php function inside the v-repeat loop that accepts an argument($beerId).

<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>

                {{ auth()->user()->timesAddedBeer($beerId) }}
            </div><!-- /.col-md-3 -->
        </div><!-- v-repeat -->
    </div><!-- /.row -->
</div><!-- /.search-item -->

This block chunks up arrays into bits of 4 and displays 4 items per row with 12 items per page.

I need to be able to set the $beerid variable. I cannot assign it a beer.id javascript value because the javascript loads a fraction slower than the php and the php function executes before the javascript data has been loaded.

I do have access to a $beers array from php containing the same value but that would mean I would have to run a foreach loop somewhere to get those values out, and I already have a v-repeat loop. So that will get messy.

Currently I feel like I am running out of options. This is also pretty hard to explain to outsiders and I have already simplified the example. If you need more info please just ask! I would be happy if somebody could help me out.

Stephen Hallgren · Accepted Answer · 2015-10-26 14:15:16Z

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.

Collectives™ on Stack Overflow

Combining vuejs v-repeat and php foreach loop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related