Question

我有一个填充了一组对象的表（mappedMenus）。

MappedMenus是一个名为“menuTypeId”的属性。

此属性“menuTypeId”的可能值在MenuTypes对象数组中设置，具有“id”和“name”属性。

使用这些MenuTypes对象，我填充每行的选择。

我遇到的问题是，我不知道如何将每个MappedMenu对象的“menuTypeId”属性绑定到其 select 选择的选项。

正如您在我的代码中所看到的，我使用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
        }
    },

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

1 个答案: