Vuetify 组合框项目模板未使用 vuex 更新

Posted 2023-02-22

【中文标题】Vuetify 组合框项目模板未使用 vuex 更新

【英文标题】：Vuetify combobox item template is not updating with vuex

【发布时间】：2021-05-11 09:20:26

【问题描述】：

我正在使用带有项目和选择槽的 Vuetify 组合框。当我选中取消选中项目时，我的 vuex 商店正在更新。但是，如果我从商店中删除其中一个选定的项目，那么选择槽会更新，但项目槽不会。

下面是代码笔。我错过了什么？

https://codepen.io/mjchaudhari/pen/xxRVavx?editors=1011

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-combobox
        v-model="values"
        :items="items"
        label="Select Item"
        multiple
      >
        <template v-slot:selection=" item, index ">
          <v-chip v-if="index <= 1">
            <span> item </span>
          </v-chip>
          <span
            v-if="index === 2"
            class="grey--text caption"
          >
            (+ values.length - 2  others)
          </span>
        </template>
        <template v-slot:item=" active, item, attrs, on ">
          <v-list-item v-on="on" >
            <v-list-item-action>
              <v-checkbox :input-value="active"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              item.id - item.name
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-combobox>
    </v-container>
    <div v-for="v in values">
      <span>v.name</span> <v-btn v-on:click="deleteVal(v)">X</v-btn>
    </div>
  </v-app>
  
</div>


const store = new Vuex.Store(
  state: 
    items: [
      id: 1, name:'foo', id: 2, name:'bar', id: 3, name:'fizz',
      id: 4, name:'buzz', id: 5, name:'fizzbuzz', id: 6, name:'foobar-foo'
    ],
    values: []
  ,
  mutations: 
    'update-values': function(state, values=[]) 
      state.values = values
    
  
)
import  mapState, mapMutations  from "https://cdn.skypack.dev/vuex"
new Vue(
  el: '#app',
  store,
  vuetify: new Vuetify(),
  data: () => (
  ),
  computed: 
    ...mapState(
      items: state => state.items,
      values: state => state.values
    ),
    values: 
      get: function () 
        return this.$store.state.values
      ,
      set: function (val) 
        this.updateSelectedVal(val)
      
    
  ,
  methods: 
    ...mapMutations(
      updateSelectedVal: 'update-values'
    ),
    deleteVal(val) 
      let idx = this.values.findIndex(v=> v.id === val.id)
      let vals = [...this.values]
      vals = vals.splice(idx,1)
      console.log(vals)
      this.updateSelectedVal(vals)
      
    
  
  
)

【参考方案1】：

您可以在更新状态时复制这些值：

mutations: 
  'update-values': function(state, values=[]) 
    state.values = [...values];
  

或者，一个替代的、更简单和更好的解决方案不是拼接副本，而是拼接原始（状态的values），在delete-value突变中：

mutations: 
  'delete-value': function(state, index) 
    state.values.splice(index, 1);
  

并且，显然，将其称为：

deleteVal (val) 
  let idx = this.values.findIndex(v=> v.id === val.id);
  if (index > -1) 
    this.$store.commit('delete-value', index)
  

---

更简单的是，只需映射delete-value 突变并使用标记中的key 调用它：https://codepen.io/andrei-gheorghiu/pen/xxRVQPp?editors=1011

---

旁注：您的:input-value 条件似乎错误。应该是：

<v-checkbox :input-value="values.includes(item)"></v-checkbox>

我在我的版本中修复了它，但在您的版本中，当您单击复选框的标签时，显示的选择与实际选择不同步。