Question

我正在为选项卡式界面构建选项卡，用户可以在其中更改选项卡的标题。我想做的是这样的事情：

标记：

<div class="tabs" v-for="(tab, tabIndex) in tabs" :key="tab.id" >
  <input type="text" v-model:value="tabs(tabIndex)">
</div>

计算属性：

computed: {
  scenes2: {
    get(tabIndex){
      return this.$store.state.tabs[tabIndex].title
    },
    set(value, tabIndex){
      this.$store.dispatch('setTabTitle', {value: value, tabIndex: tabIndex} )
    },
  },
},

当然，这不起作用。在这里使用v-model的正确方法是什么，以便我可以将v-model与Vuex状态中tabs数组上的相关索引相关联？

Answer 1

我不会对数组和对象使用计算属性。

 <div class="tabs" v-for="(tab, tabIndex) in $store.state.tabs" :key="tab.id">
   <input type="text" :value="tab.title" @input="e => updateTabTitle(tabIndex, e)">
 </div>

methods: {
  updateTabTitle(tabIndex, event) {
    this.$store.dispatch('setTabTitle', {value: event.target.value, tabIndex} )
  }
}

在Vuex状态下使用v-model和v-for数组

1 个答案: