I use vuex and try to get v-model variable in data from getters.

I need Object to fill it as v-model (input). Keys of Object I need to get from Store. But I cannot to change values of this Object

computed: {
  list() {
   return this.$store.getters.list;
   // [
   //  {
   //    id: 100,
   //    name: 'groupName1',
   //    children: [
   //       {
   //         id: 101,
   //         name: 'lineName1',
   //         children: [
   //           {id: 111, name: 'product1', children: [{id: 1, name: 'part1'}, {id: 2, name: 'part2'}]},
   //           {id: 112, name: 'product2', children: [{id: 3, name: 'part3'}, {id: 4, name: 'part4'}]}
   //         ]
   //       },
   //       ...
   //     ]
   //   },
        ...
   // ]
  }
},

data() {
  return {
    inputValue: {}
  }
},

beforeCreate() {
  this.inputValue = this.$store.getters.inputValue; // {
                                                    //   100: { 101: '', 102: '', 103: '' },
                                                    //   200: { 1: '', 2: '', 3: '' },
                                                    //   300: { 1: '', 2: '', 3: '' }
                                                    //   }
},
methods: {
    showPartNames(groupId, lineId, productName) {
      let products = this.list.find(group => group.id == groupId)?.children
            .find(child => child.id == lineId)?.children
      return products?.find(p => p.name.toLowerCase() === productName.toLowerCase())?.children || ''             
    },
}

 <div v-for="(group, index) in list">
  <div v-for="(line, inx) in group.children">
    <el-input
      v-model="inputValue[group.id][line.id]"
    >
    </el-input>
    <template v-for="(part, i) in showPartNames(group.id, line.id, inputValue[group.id][line.id])">
      <div :key="i">
        <a :href="`/partnumbers/${group.id}/${line.id}/${part.id}`">{{ part.name }}</a>
      </div>
    </template>
  </div>

But it does not work. Is there a way to get Object with keys from getters and change its values from input?

CodePudding user response：

sample https://codesandbox.io/s/zen-sunset-ouoktf?file=/src/App.vue

define inputValue as data

inputValue : this.$store.getters.inputValue

and set a watcher for it .

 watch: {
    inputValue: {
      handler: function (val) {
        console.log(val); // commit changes to store <---
      },
      deep: true,
    },
  },

test it and let me know it is working or not