是否可以将 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?

推荐答案

1. 好的，首先不要这样做 v-model="displayedFarmer.arrivalDates" 如果 displayedFarmer 是你在 Vuex 中的状态.您将直接对其进行变异，这是一种不好的做法.
2. 尝试将计算值与 get 和 set 一起使用到 v-model 中.它是这样的:

1. OK first of all never do this v-model="displayedFarmer.arrivalDates" if displayedFarmer is your state in Vuex. You will mutate it directly which is a bad practice.
2. Try using computed value with get and set into v-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屋！