Vuex 저장소의 슬라이더 설정 값 확인

Vuex 저장소의 슬라이더 설정 값 확인

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.logthis.fontSize 실제로 vuex 저장소에서 저장된 글꼴 크기를 반환하지만 슬라이더의 기본값으로 설정할 수 없음.

문제는 당신이 두 가지 모두를 사용하고 있다는 것이다.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 상점에서 당신은sizeOfFont에 의해 선택되어야 하는 기본 값v-model.

참조URL: https://stackoverflow.com/questions/62502966/vuetify-slider-set-value-from-vuex-store