Javascript vue js多重动态选择填充问题

你好，这里是vue js guru's

目前，我正在创建一些带有更高级设置的向导，需要一些帮助才能获得正确的结果。我尝试了几种不同的方法，但还没有成功

我想做的是：

我正在构建一个训练创建向导，在该向导中可以添加部分，在每个部分中，您可以定义一个或多个运动，其中每个运动本身都应该有某种测量。最后一个运动应该根据所选运动进行更改，并且可以有一个或多个选项作为选择

数据由axios（远程）获取并保存到数据阵列中，以便进行以下可用移动：

[
    '' => [
        1 => [
            'name' => 'pull ups',
            'measure' => [
                0 => 'none',
                1 => 'distance',
            ],
        ],
        2 => [
            'name' => 'push ups',
            'measure' => [
                0 => 'none',
                1 => 'weight',
            ],
        ],
        ...
    ],
    ...
]

然后将其存储在

this.movements=data.movements我的vue js实例中的数据数组

以下是我的vue js代码：

<script>
new Vue({
    el: '#workout-wrapper',
    data() {
        return {
            dynamicOptions: [],

            name: null,
            sections: [{
                name: null,
                rounds: null,
                minutes: null,
                measure: null,
                movements: [{
                    reps: null,
                    movement: null,
                    measure: null,
                    remarks: null
                }]
            }],
            movements: [],
            ...
        }
    },
    methods: {
        ...
        onMovementChange(group, movement) {
            // TODO: this one combined with the computed options still isn't working correctly

            if (group == '') {
                this.options = { section: 0, movement: 0, options: this.movements[""][movement].measure };
            } else {
                this.options = { section: 0, movement: 0, options: this.movements[group][movement].measure };
            }
        },
        ...
    },
    computed: {
        options: {
            get(event, data) {
                // TODO: now we should only return the options for section and movement indexes

                return this.dynamicOptions;
            },
            set(data) {
                this.dynamicOptions[data.section] = [];
                this.dynamicOptions[data.section][data.movement] = data.options;
                // console.log(this.dynamicOptions);
            }
        }
    },
    created() {
        axios.get('/workouts/create/data').then(response => {
            let data = response.data;
            this.movements = data.movements;
            ...
        }).catch(error => {
            console.error(error);
        });
    }
});
</script>


新Vue({
el:“#运动包装”，
数据（）{
返回{
动态选项：[]，
名称：空，
章节：[{
名称：空，
轮数：空，
分钟：空，
度量值：null，
运动：[{
代表：空，
移动：空，
度量值：null，
备注：空
}]
}],
运动：[]，
...
}
},
方法：{
...
移动更改（组、移动）{
//TODO:此选项与计算选项组合后仍然无法正常工作
如果（组=“”）{
this.options={section:0，movement:0，options:this.movements[“”][movement].measure}；
}否则{
this.options={section:0，movement:0，options:this.movements[group][movement].measure}；
}
},
...
},
计算：{
选项：{
获取（事件、数据）{
//TODO:现在我们应该只返回节和移动索引的选项
返回此参数。动态选项；
},
集合（数据）{
this.dynamicOptions[data.section]=[]；
this.dynamicOptions[data.section][data.movement]=data.options；
//console.log（this.dynamiccoptions）；
}
}
},
创建（）{
get（'/workouts/create/data'）。然后（response=>{
让data=response.data；
this.movements=data.movements；
...
}).catch（错误=>{
控制台错误（error）；
});
}
});

这里是模板：

<div class="row m-t-20" v-for="(section, index) in sections">
<div class="col-md-12">
    <div class="card card-default no-border">
        <div class="card-header separator">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Section name</label>
                        <div class="input-group m-b-15">
                            <input type="text" name="sections[0][name]" placeholder="e.g. Warming-Up" class="form-control" v-model="section.name">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-danger" data-title="Remove" data-tooltip @click="removeSection(index)">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Rounds</label>
                        <input type="number" name="sections[0][rounds]" class="form-control" placeholder="Optional" min="0" v-model="section.rounds">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="">
                            Minutes
                        </label>
                        <input type="number" name="sections[0][minutes]" class="form-control" placeholder="Optional" min="0" v-model="section.minutes">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Measure</label>
                        <select name="sections[0][measure]" class="form-control" v-model="section.measure"> {{-- data-init-plugin="select2" --}}
                            <option :value="key" v-for="(measure, key) in measurements">@{{ measure }}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-block m-t-25">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th width="10%">
                        Reps
                    </th>
                    <th width="35%">
                        Movement
                    </th>
                    <th width="20%">
                        Measure
                    </th>
                    <th width="35%">
                        Remarks
                    </th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(movement, movementIndex) in section.movements">
                    <td>
                        <input type="number" name="sections[0][movements][0][reps]" class="form-control" min="0" v-model="movement.reps">
                    </td>
                    <td>
                        <select name="sections[0][movements][0][movement]" class="form-control" v-model="movement.movement" @change="onMovementChange('', movement.movement)">
                            <optgroup :label="group" v-for="(options, group) in movements">
                                <option :value="key" v-for="(option, key) in options">@{{ option.name }}</option>
                            </optgroup>
                        </select>
                    </td>
                    <td>
                        <select name="sections[0][movements][0][measure]" class="form-control" v-model="movement.measure" :disabled="!movement.movement">
                            <option :value="key" v-for="(measure, key) in options">@{{ measure }}</option>
                        </select>
                    </td>
                    <td>
                        <textarea name="sections[0][movements][0][remark]" rows="1" class="form-control" v-model="movement.remarks"></textarea>
                    </td>
                    <td>
                        <button type="button" class="btn btn-link text-danger" data-title="Remove" data-tooltip @click="removeMovement(index, movementIndex)">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" class="text-center">
                        <button type="button" class="btn btn-cons btn-complete" data-title="Add movement" data-tooltip @click="addMovement(index)">
                            <i class="fa fa-plus"></i>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>


节名
轮
会议记录
量
{{--data init plugin=“select2”---}
@{{measure}}
代表
移动
量
评论
@{{option.name}
@{{measure}}

使用此当前设置，它会在第二个选择框中添加数据，但它总是在更改，因此，当添加第二个移动行时，两个选择框都会根据第二行中选定的移动等更改选项。。。它应该只根据当前行进行更改，而不是分段

也许你们中的一些人可以帮我解决这个问题。。。如果需要更多信息，请告诉我：-）
codepen上的一个小样本或其他地方可以帮助我调试它。但我认为这可能是v型模型的参考。他们可能指向同一个模型。也许给每个动作一个id，或者使用索引使其成为v模型值的一部分
v-model=“movement[id].measure”
（或类似的东西）@JeremyWalters感谢您的反应这是由于v-model，我没有正确绑定它，所以我将它改为movement.movement.measure当movement.movement设置好后，现在它正常工作根本不需要onChange en计算函数：-）酷，很高兴你现在分类了