结合 vuejs v-repeat 和 php foreach 循环？答案

【问题标题】：Combining vuejs v-repeat and php foreach loop?结合 vuejs v-repeat 和 php foreach 循环？
【发布时间】：2016-01-05 09:18:11
【问题描述】：

我目前正在使用 vue.js 来回显一堆带有 v-repeat 功能的项目。不幸的是，我还需要在 v-repeat 循环中运行一个接受参数（$beerId）的 php 函数。

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

这个块将数组分成 4 位，每行显示 4 个项目，每页显示 12 个项目。

我需要能够设置 $beeid 变量。我无法为其分配 beer.id javascript 值，因为 javascript 加载速度比 php 慢，而且 php 函数在加载 javascript 数据之前执行。

我确实可以从 php 访问一个包含相同值的 $beers 数组，但这意味着我必须在某个地方运行一个 foreach 循环来获取这些值，并且我已经有一个 v-repeat 循环。所以会变得一团糟。

目前我觉得我的选择已经不多了。这也很难对外人解释，我已经简化了这个例子。如果您需要更多信息，请询问！如果有人可以帮助我，我会很高兴。

【问题讨论】：

标签： javascript php laravel foreach vue.js

【解决方案1】：

我认为您不能（或不应该）按照您尝试编码的方式进行编码。由于您在 Vue 中有啤酒数据集，因此我建议您可以采用两个选项。

通过点击 AJAX 端点在 Vue 中动态加载啤酒数量（如果选项 #2 的操作过于昂贵，这将是我的首选方式）。

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

在将啤酒数据集交给 Vue 之前循环遍历它并调用 timesAddedBeer 函数并将该值添加到数据集中。

【讨论】：