[FIXED] How do I dynamically assign a tables value to a v-for

Issue

I have a <dl> list filled with a v-for. Inside each list, the element should also be a table, which should be filled with data depending on the list element. The code looks like this:

<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>

The test function looks like this:

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

The second v-for is populated when the button is clicked. The problem is, that each list item gets the same table content. Probably the last cronjob item. How can I assign/bind the data from the tables to the data from the list item, so that each list item gets the right table content?

Thanks in advance!

Solution

Currently you are are only retaining information from your last ajax call. Instead you need to push the results of each ajax call onto an array and use that array with your 2nd v-for. You can use the array with the first v-for as well and make thinks cleaner. This code shows the idea, (because I don't have your ajax endpoint or vue datamode I can't test the code but it should get you in the ball park):

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

            });
        }
 }

Answered By - RonC

Answer Checked By - Marie Seifert (PHPFixing Admin)