Javascript 如何为v-for动态分配表值

我有一个

列表，里面有一个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;
                });
            }
}

检查



{{cronname.name}
身份证件
开始
{{“ID:+cronjob.ID}
{{“开始：+cronjob.Start}

测试函数如下所示：

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

test:function（）{
让vm=这个；
对于（var i=0；i

单击按钮时，将填充第二个v-for。 问题是，每个列表项都获得相同的表内容。可能是最后一个cronjob项。 如何将表中的数据分配/绑定到列表项中的数据，以便每个列表项都获得正确的表内容

---

提前谢谢

目前您只保留上次ajax调用的信息。相反，您需要将每个ajax调用的结果推送到一个数组中，并将该数组与第二个v-for一起使用。您还可以将阵列与第一个v-for一起使用，使其更干净。这段代码展示了这一想法（因为我没有ajax端点或vue数据模式，所以我无法测试代码，但它应该能让您了解情况）：

检查



{{detail.name}
身份证件
开始
{{“ID:+cronjob.ID}
{{“开始：+cronjob.Start}
数据：{
crontails=[]；
}
...
测试：函数（）{
var_this=这个；
让vm=这个；
对于（var i=0；i

嘿，罗恩，谢谢你的意见。我试过你的解决办法。结果是，列表没有加载。不过还是要谢谢你！我将“detail.jobs”改为“cronDetails.jobs”，这使我更进一步。但是现在控制台说“vm.cronnames[i].id”没有定义，这有点奇怪……我监督了这一行：所以我把它改回来了。现在整个列表都消失了，wich甚至更奇怪了……很抱歉，这是一个额外的新列表，我只是从内存中键入，无法真正尝试代码，因为我没有ajax端点。很高兴你让它工作了。没问题！