vue for vue forおよびv-modelを使用したvuexの計算

Question

v-forをv-modelとともに使用する必要があります。私はdocsを読んでおり、突然変異ハンドラの外側で突然変異を実行することなくv-forと共に使用する方法の例はありません。

プロパティを直接変更せずにv-for内部でv-modelを使用するにはどうすればよいですか？

<div v-for="product in products"> 
    <select @change="addItem(product)" v-model="product.quantity"> 
     <option value="">0</option> 
     <option v-for="n in 10">{{n}}</option> 
     </select> 
    </div> 

// component 

    methods : { 
    ...mapMutations({ 
     addToCart: ADD_TO_CART 
    }) 
    }, 

Answer 1

ない私は完全にあなたが求めているものを理解したが、以下を見て確認してください。

EDIT Vuexを使用するように更新

- それwouldnとしてVモデル経由ではなく、 「がトンが必要とされる変異またはアクションを呼び出すことが

const store = new Vuex.Store({ 
 
    state: { 
 
     products: [ 
 
     \t { 
 
       name: 'foo', 
 
       quantity: 0, 
 
      }, 
 
      { 
 
       name: 'bar', 
 
       quantity: 0, 
 
     \t }, 
 
     ], 
 
    }, 
 
    getters: { 
 
    \t cart (state) { 
 
     \t return state.products.filter((product) => { 
 
      \t return product.quantity > 0 
 
      }) 
 
     },  
 
    }, 
 
    mutations: { 
 
     updateQuantity(state, payload) { 
 
      state.products[payload.index].quantity = payload.val 
 
     }, 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    computed: { 
 
     products() { 
 
      return store.state.products 
 
     }, 
 
     cart() { 
 
      return store.getters.cart 
 
     }, 
 
    }, 
 
    methods: { 
 
     addItem (index, val) { 
 
      store.commit('updateQuantity', { index, val }) 
 
     }, 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vuex@next"></script> 
 
<div id="app"> 
 
    <div v-for="(product, index) in products"> 
 
     <label>{{ product.name }}</label> 
 
     <select @change="addItem(index, $event.target.value)"> 
 
      <option value="">0</option> 
 
      <option v-for="n in 10">{{n}}</option> 
 
     </select> 
 
    </div> 
 
    <h1>cart</h1> 
 
    <pre>{{ cart }}</pre> 
 
</div>