Vue JS - 将选择选项值绑定到 v-for 中的模型 [英] Vue JS - Bind select option value to model inside v-for

问题描述

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

I have a table populated with an array of objects (mappedMenus).

MappedMenus 是一个具有名为menuTypeId"的属性的类.

MappedMenus is a class that has a propery named "menuTypeId".

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

The possible values for this property "menuTypeId" are set in an array of MenuTypes objects, that have an "id" and a "name" property.

使用这些 MenuTypes 对象，我为每一行填充 select.

With these MenuTypes objects, I populate the select for each row.

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

The problem I´m having, is that I don´t know how to bind the "menuTypeId" property of every MappedMenu object to its select selected option.

正如您在我的代码中看到的，我在 tr 中使用我的映射菜单做了一个 v-for.

As you can see in my code, I do a v-for in the tr with my mappedMenus.

对于每个对象，我都有一行带有 select 选项.这些选项是使用另一个名为 menuTypes 的数组填充的.

For every object, I have a row with a select with options. The options are populated using another array named menuTypes.

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

Then I tried to bind the select with the MappedMenu object in the loop (e.menuTypeId) and then bind the value in the option. I dont get any error with the following code, but I does not works either.

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

我做错了什么?

推荐答案

难道你不应该使用 m.id 之类的东西而不是 e.menuTypeId 吗?因为 e.menuTypeId 也是一个模型.

Shouldn't you use something like m.id instead of e.menuTypeId? Because the e.menuTypeId is also a model.

我还在 for 中测试了绑定，它工作正常.

I've also tested binding in for and it works fine.

<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 中的模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！