Vue JS - 将选择选项值绑定到v-for内部

Question

我有一个填充了一组对象的表(mappedMenus).

MappedMenus是一个名为"menuTypeId"的类.

此属性"menuTypeId"的可能值在MenuTypes对象数组中设置,具有"id"和"name"属性.

使用这些MenuTypes对象,我填充每行的选择.

我遇到的问题是,我不知道如何将每个MappedMenu对象的"menuTypeId"属性绑定到其选择的选定选项.

正如您在我的代码中看到的那样,我使用mappedMenus 在tr中执行v-for .

对于每一个对象,我有一个行选择的选项.使用另一个名为menuTypes的数组填充选项.

然后我尝试将select与MappedMenu对象绑定在循环中(e.menuTypeId),然后绑定选项中的值.我没有得到以下代码的任何错误,但我也不起作用.

<table id="#divTable" class="uk-table">
    <thead>
        <tr>
            <th>Menu Type</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="e in mappedMenus">
            <td>
                <select class="uk-select" v-model="e.menuTypeId">
                    <option v-for="m in menuTypes" v-bind:value="e.menuTypeId">{{m.name}}</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

<script>
var updateMenuVM = new Vue({
    el: '#divTable',
    data: {
        menuTypes: [{ id: 1, name: 'Principal' }, { id: 2, name: 'Dessert' }, { id: 3, name: 'Drink' }],
        mappedMenus: [{ menuName: 'Hamburger', menuTypeId: 1 }, { menuName: 'Ice Cream', menuTypeId: 2 }, { menuName: 'Sprite', menuTypeId: 3 }]
    }
</script>

我做错了什么？

Answer 1

你不应该使用像"m.id"而不是e.menuTypeId这样的东西吗？因为e.menuTypeId也是一个模型.

我也测试了绑定,它工作正常.

    <select v-model="testVal">
        <option v-for="item in test" :value="item">{{item}}</option>
    </select>

    data(){
        return{
          test: ['one', 'two', 'three'],
          testVal: null
        }
    },