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数据模式，所以我无法测试该代码，但它应该使您大开眼界）：

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

            });
        }
 }

如何动态将表值分配给v-for

1 个答案: