时间戳

首页 > 解决方案 > Vuetify 组合框项目模板未使用 vuex 更新

vue.js - Vuetify 组合框项目模板未使用 vuex 更新

问题描述

我正在使用带有项目和选择槽的 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)
      
    }
  }
  
})

标签： vue.jsvuetify.jsvuexv-select

解决方案

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

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>

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

推荐阅读