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

Question

我目前正在使用 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 -->

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

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

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

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

Answer 1

我认为您不能(或应该)按照您尝试编码的方式进行编码。由于您在 Vue 中有啤酒数据集，我建议您可以采取两种选择。

1. 通过点击 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>
   

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