Как изменить вычисляемый объект в Vue?

Question

Как изменить вычисляемый объект в Vue?

1

У меня есть простой выбор месяцев:

<select v-model="month" v-on:change="dateChanged('month', month)">
    <option v-for="(month, index) in months" :value="index">{{ month }}</option>
</select>

Основной объект даты, хранящийся в Vuex:

computed: {
    ...mapGetters(['date']), 
    month() {
        return this.date.format('M') - 1
    },

Проблема заключается в том, что когда я меняю месяцы, значение month не изменяется... Изменяется визуально месяц в элементе, но значение все равно такое же, как и раньше.

user1692333 07 май 2018, в 08:46

Источник

0

Возможно, вы захотите взглянуть на Двустороннее вычисляемое свойство в vuex.vuejs.org/en/forms.html . V-модель для местного государства. ваш месяц состояние в Vuex. v-model="month" не будет работать, если только вы не хотите изменять локальное состояние, а не состояние Vuex
Jacob Goh 07 май 2018, в 06:12

Теги:

javascript

vue.js

vuex

momentjs

1 ответ

Ещё вопросы

Возможно, вы захотите взглянуть на Двустороннее вычисляемое свойство в vuex.vuejs.org/en/forms.html . V-модель для местного государства. ваш месяц состояние в Vuex. v-model="month" не будет работать, если только вы не хотите изменять локальное состояние, а не состояние Vuex

Terry · Answer 1 · 2018-05-07T04-11-00.000Z

Это потому, что computed свойство, как следует из названия, может быть только перезаписано внутри, и это не хранилище данных, в которое вы можете писать. Если вы хотите заполнить свой month из хранилища VueX и сохранить возможность записи, его лучше всего написать в виде комбинации:

наблюдатель, который следит за date, и обновляет внутренние данные month всякий раз, когда хранилище обновляется
внутренние данные, которые просто позволяют писать и читать month

Примером может служить следующее:

// Populate internal store with state data
data: function() {
    return {
        month: this.date.format('M') - 1
    }
},

// Map getter
computed: {
    ...mapGetters(['date'])
},

// Watch changes to mapped getter
watch: {
    date: function(val) {
        this.month = this.date.format('M') - 1
    }
}

Конечно, следуя принципу DRY, вы можете абстрагировать логику в отдельный метод:

methods: {
    getMonth: function(month) {
        return month.format('M') - 1;
    }   
},
data: function() {
    return {
        month: this.getMonth(this.date)
    }
},
computed: {
    ...mapGetters(['date'])
},
watch: {
    date: function(val) {
        this.month = this.getMonth(val)
    }
}