Vue JS - v-for 내부에서 모델링할 선택 옵션 값 바인딩

Vue JS - v-for 내부에서 모델링할 선택 옵션 값 바인딩

나는 일련의 물체들로 채워진 테이블을 가지고 있다.

MappedMenus는 "MenuTypeId"라는 이름을 가진 수업이다.

이 속성 "menuTypeId"의 가능한 값은 "id" 및 "name" 속성을 가진 MenuType 개체 배열에서 설정된다.

이러한 MenuTypes 객체를 사용하여 각 행의 선택 항목을 채운다.

내가 가지고 있는 문제는 모든 MappedMenu 개체의 "menuTypeId" 속성을 선택한 옵션에 바인딩하는 방법을 모른다는 것이다.

내 코드에서 볼 수 있듯이, 난 내 지도메누스와 함께 tr에서 v-for를 한다.

모든 객체에 대해 선택사항이 있는 행이 있다.옵션은 menuTypes라는 이름의 다른 배열을 사용하여 채워진다.

그런 다음 선택 항목을 루프(예.menuTypeId)의 MappedMenu 개체와 바인딩한 다음 옵션의 값을 바인딩하려고 했다.다음 코드는 오류가 없지만, 나 역시 작동하지 않는다.

<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모델이기도 하다.

나는 또한 binding을 테스트했다.for그리고 그것은 잘 작동한다.

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

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

참조URL: https://stackoverflow.com/questions/43404552/vue-js-bind-select-option-value-to-model-inside-v-for