Как мне динамически назначить значение таблицы для v-for

Question

У меня есть список <dl>, заполненный v-for.Внутри каждого списка элемент также должен быть таблицей, которая должна заполняться данными в зависимости от элемента списка.Код выглядит следующим образом:

<button v-on:click="test">Check</button>
    <br><br>
    <dl>
        <dt id="listItem" v-for="cronname in cronnames" :key="cronname.id" 
        :value="cronname.id">
            {{cronname.name}}
            <span></span>
            <table>
                <tr>
                    <th>id</th>
                    <th>Start</th>
                </tr>
                <tr  v-for="cronjob in cronjobs" :key="cronjob.id">
                    <td>{{"ID: " + cronjob.id }}</td>
                    <td>{{"Start: " + cronjob.start }}</td>
                </tr>
            </table>
        </dt>
    </dl>

Функция теста выглядит следующим образом:

test: function(){
            let vm = this;
            for(var i = 0; i < vm.cronnames.length; i++)
            {

                vm.cronId = vm.cronnames[i].id;
                vm.cronIdUebertrag = vm.cronId;
                $.getJSON("/api/get_cronjob.php", {cronIdUebertrag: 
                this.cronIdUebertrag}, function (result) {
                    vm.cronjobs = result;
                });
            }
}

Второй v-for заполняется при нажатии кнопки.Проблема в том, что каждый элемент списка получает одинаковое содержимое таблицы.Вероятно, последний элемент Cronjob.Как я могу назначить / связать данные из таблиц с данными из элемента списка, чтобы каждый элемент списка получил правильное содержимое таблицы?

Заранее спасибо!

Answer 1

В настоящее время вы сохраняете информацию только от вашего последнего вызова AJAX.Вместо этого вам нужно поместить результаты каждого ajax-вызова в массив и использовать этот массив со вторым v-for.Вы также можете использовать массив с первым v-for и сделать мысли чище.Этот код показывает идею (потому что у меня нет вашей конечной точки ajax или vue datamode, я не могу протестировать код, но он должен привести вас в стадион):

<button v-on:click="test">Check</button>
<br><br>
<dl>
    <dt id="listItem" v-for="detail in cronDetails" :key="detail.id" 
    :value="detail.id">
        {{detail.name}}
        <span></span>
        <table>
            <tr>
                <th>id</th>
                <th>Start</th>
            </tr>
            <tr  v-for="cronjob in detail.jobs" :key="cronjob.id">
                <td>{{"ID: " + cronjob.id }}</td>
                <td>{{"Start: " + cronjob.start }}</td>
            </tr>
        </table>
    </dt>
</dl>

 data: {
     cronDetails = [];
 }

 ...

 test: function(){
        var _this = this;
        let vm = this;
        for(var i = 0; i < vm.cronnames.length; i++)
        {

            vm.cronId = vm.cronnames[i].id;
            vm.cronIdUebertrag = vm.cronId;
            $.getJSON("/api/get_cronjob.php", {cronIdUebertrag: 
            this.cronIdUebertrag}, function (result) {
                vm.cronjobs = result;
                _this.cronDetails.push({     //Update: I removed new
                      name: vm.cronnames[i],
                      id: vm.cronnames[i].id,
                      jobs: result
                });

            });
        }
 }