I searched through several posts to find out what I am doing incorrectly. It seems like everything is set up correctly.
MOTIVE
Based on the value of COMPONENT A, I want to change hide/display content using v-show in DEPENDENT COMPONENT.
ISSUE
In the TextField Component, there is an input that triggers a mutation on my Vuex store. The Dependent Component has a computed value that listens to changes on the Vuex store.
While typing in my TextField Component, I can confirm using the Vue.js extension that the mutations are being triggered as expected.
HOWEVER, there is no visible change on the page.
COMPONENT A
<template>
<div class="field">
<input type="text" :name="field.name" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</div>
</template>
<script>
export default {
props: ['field'],
methods: {
updateValue: function (value) {
this.$store.commit('UPDATE_USER_INPUT', {'key': this.field.name, 'value': value})
}
}
}
</script>
MUTATION
UPDATE_USER_INPUT (state, payload) {
state.userInput[payload['key']] = payload['value']
}
DEPENDENT COMPONENT
<template>
<div class="field-item">
{{ userInput }}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState([
'userInput'
])
}
}
</script>
No matter what I attempt, {{ userInput }} remains empty: {} until I go back to the same location in my route. However, the computed value listener doesn't seem to be triggered.