来自 vuex 商店的 Vuetify Slider 设置值

Question

我正在尝试将我的 vuex 商店中的现有值设置为我的 vuetify 滑块。但它总是定位到 0。

这是我的滑块/我的代码：

   <v-slider
     v-model="sizeOfFont"
     :max="40"
     :value="pureFontSize || ''"
     @change="changeFontSize()"
     append-icon="mdi-format-size"
   ></v-slider>

export default Vue.extend({
  data: () => ({
    sizeOfFont: '',
  }),

  computed:  {
    ...mapState(['font', 'fontSize']),

    pureFontSize() {
      return this.fontSize.toString().replace('px', '');
    }
  },
  methods: {
    changeFontSize() {
      this.$store.commit('setFontSize', `${this.sizeOfFont}px`);
    },
 }

如果我 console.log this.fontSize 它实际上从我的 vuex 存储返回保存的字体大小，但我无法将它设置为我的滑块的默认值。

Answer 1

问题是您同时使用v-model、value 和change 事件来控制字体属性，并且它们正在相互交互。您应该使用v-model 或value 和change 事件的组合来控制属性，仅使用v-model 如下所示：

<v-slider
  v-model="sizeOfFont"
  :max="40"
  append-icon="mdi-format-size"
></v-slider>

export default Vue.extend({
  computed:  {
    ...mapState(['font', 'fontSize']),
    
    sizeOfFont: {
      get() {
        return this.fontSize.toString().replace('px', '');
      },
      set(val) {
        this.$store.commit('setFontSize', `${val}px`);
      }
    }
  }
}) 

然后在你的 Vuex store 中，你可以给 sizeOfFont 一个默认值，v-model 应该会取这个值。