是否可以将 Vuetify 的日期选择器与来自 vuex 的数组一起用作其 v 模型? [英] Is it possible to use Vuetify's date picker with an array from vuex as its v-model?
问题描述
我正在尝试将包含表单的组件映射到 vuex 中名为displayedFarmer"的对象下的变量.
I'm trying to map a component holding a form to variables in vuex, under an object named "displayedFarmer".
displayedFarmer
将 arrivalDates
作为数组.
我正在使用 mapState
引入 displayedFarmer
:
I'm using mapState
to bring in displayedFarmer
:
computed: {
...mapState(['displayedFarmer']),
我正在使用数据选择器:
I'm using the data picker as such:
<v-date-picker
v-model="displayedFarmer.arrivalDates"
:disabled="isDisabled"
multiple
>
</v-date-picker>
如果我使用 dates
- 在 vue data()
函数中初始化的数组,它会按预期工作.但直接到 displayedFarmer.arrivalDates
- 它根本不起作用.
If I'm using dates
- an array initialized in the vue data()
function, it works as expected. But directly to the displayedFarmer.arrivalDates
- it doesn't work at all.
我曾尝试使用 dates
然后将手表放在上面以手动同步它 - 但这只是一个肮脏的黑客,它会导致整个组件出现反应问题.
I've tried using dates
and then placing a watch on it to sync it manually - but this is just a dirty hack and it causes reactivity issues in the entire component.
有没有办法直接对我的 vuex 变量进行 v-model?
Is there a way to v-model directly to my vuex variable?
推荐答案
- 好的,首先不要这样做
v-model="displayedFarmer.arrivalDates"
如果displayedFarmer
是你在 Vuex 中的状态.您将直接对其进行变异,这是一种不好的做法. - 尝试将计算值与
get
和set
一起使用到v-model
中.它是这样的:
- OK first of all never do this
v-model="displayedFarmer.arrivalDates"
ifdisplayedFarmer
is your state in Vuex. You will mutate it directly which is a bad practice. - Try using computed value with
get
andset
intov-model
. It goes like this:
// template
- v-model="displayedFarmer.arrivalDates" // delete this line
+ v-model="arrivalDatesProxy" // add this line
// script
computed: {
...mapState(['displayedFarmer']),
arrivalDatesProxy: {
get() {
return this.displayedFarmer.arrivalDates;
},
set(newValue) {
// here you commit mutation to change the state with newValue
},
},
}
这篇关于是否可以将 Vuetify 的日期选择器与来自 vuex 的数组一起用作其 v 模型?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!