2 way data binding with Vuex

554
July 05, 2017, at 03:10 AM

In the code below I'm 2 way binding the output of a textarea into a p element, once from the component's internal state and once from Vuex. The Vuex state does show the initial value, but the value doesn't update as I add or delete text (as it does correctly with the 1st textarea bound to the internal data). What is the difference that is causing this issue?

Component code:

<template>
  <div>
    <div>
      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="internal_state"></textarea>
      <p> {{ internal_state }}</p>
      <hr>
      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="this.$store.state.vuex_state"></textarea>
      <p> {{ this.$store.state.vuex_state }}</p>
      <hr>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'WriteArea',
    data () {
      return {
        internal_state: ''
      }
    },
    methods: {

    }
  }
</script>

Vuex code:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
  strict: true,
  state: {
    counter: 0,
    vuex_state: 'starting string'
  },
  getters: {
    vuex_getter1: (state) => {
      return state.vuex_string
    }
  }
})
Answer 1

Vuex state should be updated via a mutation. See the documentation for this exact problem. Solution is not to use v-model, but instead to bind to the :value of the textarea and then have a custom event to mutate the Vuex state on input: https://vuex.vuejs.org/en/forms.html

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

The other option is to create a setter and getter in the same computed property:

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
Rent Charter Buses Company
READ ALSO
Google Maps Js Api not loading on Page [on hold]

Google Maps Js Api not loading on Page [on hold]

I want to use Google Maps in my projectI got a javascript api key

329
Pattern to initialize a function when angular component launch

Pattern to initialize a function when angular component launch

Recently I had initialize a function when the angular component launch

369
Having troubles pushing into an array which is a property of an object

Having troubles pushing into an array which is a property of an object

I have this array called "players" which stores all the players, each element of this array contains each individual player stored as an object, and this player object contains a property called "time" which in it of itself is an arrayWhen ever I try to push an integer...

233
Is there a way to access FM / AM radio from JavaScript? [on hold]

Is there a way to access FM / AM radio from JavaScript? [on hold]

I built a webapp to listen to radioAnalysing it's usage it came to light that about 90% of the users listen to stations they could receive via traditional radio broadcasting

264