Vuex nested loop, how to handle v-model on select/option

you could try a different data flow pattern.Your select listens to the store (but does not directly update it)

<div class="stuck" v-for="box in items">  <p>Pick an option for this box:</p>  <select :value="box.id" @change="updateBox">    <option v-for="package in packages" :value="package.id">      {{ package.name }}    </option>  </select></div>

Then you create a method that fires whenever the selected option changes

updateBox(e) {  const id = e.target.value;  this.$store.commit('changeYourBox', id);},

This function should commit a vuex mutation that alteres the box id. So you'd need that mutation too.Once the store value updates, your components box object updates and the select that listens to that store will update it's selected value accordingly.

That way, you can alter the store value from anywhere and the selected value will change as well.

with usage of mine library vuex-dot in this situation you can do so:

let's go with such state

  {    state: {      boxes: []    },    mutations: {      editBox(state, {target, key, value}) {        Vue.set(target, key, value);      }    }  };

So let's create additional component BoxEdit:

<template>  <div class="stuck">    <p>Pick an option for this box:</p>    <select v-model="id">      <option v-for="package in packages"              :value="package.id">{{ package.name }} </option>    </select>  </div></template><script>  import { take } from 'vuex-dot'  export default {    props: ['box', 'packages'],    computed: {      ...take('box')        .expose(['id'])        .commit('editBox', true)        .map()    }  }</script>

and now you can make simply write

<box-edit v-for="box in boxes" :box="box" :packages="packages"></box-edit>

in your subject component template.

link to library site: https://github.com/yarsky-tgz/vuex-dot