Доступ к Vuex в v-bind

Я хотел бы получить доступ к значению из модуля хранения Vuex в пределах v-bind.Доступ к Vuex в v-bind

<input @blur="validate_field" 
     name="firstName" 
     placeholder="First Name" 
     :class="{fail: this.$store.state.formStore.signupForm.errors.firstName}" 
/>

Это выдает следующее сообщение об ошибке:

TypeError: Cannot read property 'signupForm' of undefined

Я попытался добавить следующее:

computed: { 
    ...mapState({ 
    signupForm: state => state.formStore.signupForm 
    }) 
}

И замена неисправной линии с:

:class="{fail: signupForm.errors.firstName}"

, а также множество других вещей, но безрезультатно. Есть идеи?

EDIT: Вот мой магазин:

const state = { 
    // data 
    formStore: { 
    // data 
    signupForm: { 
    // data 
     errors: { 
     // NO data 
     } 
    } 
    } 
}

источник

2017-01-22 softcode

Вам нужно будет начать использовать [Vuex's getters] (https://vuex.vuejs.org/en/getters.html). – ceejayoz

signupForm - это объект в вашем магазине? Вам нужно ссылаться на него через «состояние», например: this. $ Store.state.formStore ... Но это может не сработать, в зависимости от того, как был создан этот объект. Он должен быть реактивным, и вы, вероятно, захотите использовать геттер для определенного свойства, которое вы после – wes

@ceejayoz не хотел бы, чтобы геттеры казались излишними для этого сценария? Все, что я хочу сделать, это обновить класс, когда значение изменяется в состоянии – softcode

Благодаря @wes в комментариях для указывая на документ на реактивность.

Here док говорит:

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

Я динамически заселение объект ошибки. Оказывается, Vue.js не обнаруживает этого и поэтому не может реагировать на него.

С добавлением firstName, он работает:

const state = { 
    // data 
    formStore: { 
    // data 
    signupForm: { 
    // data 
     errors: { 
     firstName: '' <-------- 
     } 
    } 
    } 
}

Урок: все свойства, которые вы ожидаете Вью реагировать должны быть явно объявлены.

источник

2017-01-23 00:56:11 softcode

Доступ к Vuex в v-bind

ответ

Смежные вопросы