Vuetify 组合框项目模板未使用 vuex 更新
Vuetify combobox item template is not updating with 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)
}
}
})
您可以在更新状态值时复制这些值:
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>
我在我的版本中修复了它,但在您的版本中,当您单击复选框的标签时,显示的选择与实际选择不同步。
我正在使用带有项目和选择槽的 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)
}
}
})
您可以在更新状态值时复制这些值:
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>
我在我的版本中修复了它,但在您的版本中,当您单击复选框的标签时,显示的选择与实际选择不同步。