Объединение vuejs v-repeat и php foreach loop?

Question

Объединение vuejs v-repeat и php foreach loop?

В настоящее время я использую vue.js для вывода множества элементов с его функциональностью v-repeat. К сожалению, мне также нужно запустить функцию php внутри цикла v-repeat, который принимает аргумент ($ 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. Я не могу присвоить ему значение javascript beer.id, потому что javascript загружает дробь медленнее, чем php, а функция php выполняется до загрузки данных javascript.

У меня есть доступ к массиву $ beers из php, содержащему то же значение, но это будет означать, что мне придется где-то запустить цикл foreach, чтобы получить эти значения, и у меня уже есть цикл v-repeat. Так что будет грязно.

В настоящее время я чувствую, что у меня заканчиваются варианты. Это также довольно сложно объяснить посторонним, и я уже упростил пример. Если вам нужна дополнительная информация, просто спросите! Я был бы счастлив, если бы кто-нибудь мог мне помочь.

0

foreach javascript laravel php vue.js

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я не думаю, что вы можете (или должны) кодировать способ, которым вы пытаетесь кодировать. Поскольку у вас есть набор данных пива в Vue, я бы предложил два варианта, которые вы могли бы выбрать.

Динамически загружайте количество пива в Vue, нажимая конечную точку AJAX (это был бы мой предпочтительный способ, если вариант # 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 и добавьте это значение в ваш набор данных.

2