javascript - 如何动态地将表值分配给 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 项目。 如何将表格中的数据分配/绑定(bind)到列表项中的数据，以便每个列表项都获得正确的表格内容？

提前致谢!

Answer 1

目前您只保留来自上次 ajax 调用的信息。相反，您需要将每个 ajax 调用的结果推送到一个数组中，并将该数组与您的第二个 v-for 一起使用。您也可以将数组与第一个 v-for 一起使用，并使思路更清晰。这段代码展示了这个想法，(因为我没有你的 ajax 端点或 vue 数据模式，我无法测试代码，但它应该让你进入球场):

<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
                });

            });
        }
 }