Question

我目前正在使用vue.js通过其v-repeat功能回显出一堆项目。不幸的是我还需要在接受参数的$-repeat循环中运行一个php函数（$ 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 -->

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

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

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

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

Answer 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函数并将该值添加到数据集中。

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

1 个答案: