Vue JS - v-inside内でモデル化するオプションの値を選択する

Question

オブジェクトの配列（mappedMenus）で表が作成されています。

MappedMenusは、「menuTypeId」という名前のプロパティを持つクラスです。

このプロパティ "menuTypeId"の可能な値は、 "id"と "name"プロパティを持つMenuTypesオブジェクトの配列に設定されます。

これらのMenuTypesオブジェクトでは、選択を各行に移入します。

私が抱えている問題は、すべてのMappedMenuオブジェクトの "menuTypeId"プロパティをselect選択したオプションにバインドする方法がわかりません。

私のコードでわかるように、私はtrのv-forをmy mappedMenusとしています。

すべてのオブジェクトについて、の選択肢を持つの行があります。 オプションは、menuTypesという別の配列を使用して設定されます。

次に、ループ内のMappedMenuオブジェクト（e.menuTypeId）でselectをバインドして、その値をオプションにバインドしようとしました。 次のコードでエラーは表示されませんが、どちらも動作しません。

<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

e.menuTypeIdの代わりに "m.id"のようなものを使うべきではありませんか？ 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 
     } 
    },