Vue input not reacting to v-model in Vuex state

Question

Vue input not reacting to v-model in Vuex state

I am attempting to simplify the explanation as much as possible. The structure I have includes a basic Vue root, Vuex store, and an input with v-model inside the navbar id.

However, it seems that the input is not reactive... Why is that?

https://i.sstatic.net/v4ukJ.png

Snippet of HTML code:

<div id="navbar">
    <h2>@{{ test }}</h2>
    <input v-model="test" />
</div>

store.js content:

import Vuex from 'vuex'

export const store = new Vuex.Store({
  state: {
    test: 'test'
  },
  getters: {
    test (state) {
      return state.test
    }
  }
})

Vue Root setup:

import { store } from './app-store.js'

new Vue({
  el: '#navbar',
  store,
  computed: {
    test () {
      return this.$store.getters.test
    }
  }
})

javascript vue.js vuex

Answer 1

Answer №1

To assign a value to a computed property, you must define both the get and set methods.

computed:{
    test:{
        get(){ return this.$store.getters.test; },
        set( value ){ this.$store.commit("TEST_COMMIT", value );}
    }
}

In your store file:

mutations:{
    TEST_COMMIT( state, payload ){
        state.test=payload;
    }
}

Now, any changes made to the input linked to the test property will trigger a store commit, updating its state accordingly.

Answer 2

To assign a value to a computed property, you must define both the get and set methods.

computed:{
    test:{
        get(){ return this.$store.getters.test; },
        set( value ){ this.$store.commit("TEST_COMMIT", value );}
    }
}

In your store file:

mutations:{
    TEST_COMMIT( state, payload ){
        state.test=payload;
    }
}

Now, any changes made to the input linked to the test property will trigger a store commit, updating its state accordingly.

Answer 3

Answer №2

Avoid using v-model in this case. Instead, incorporate @input="test" into your input field and in the methods section:

 test(e){
    this.$store.dispatch('setTest', e.target.value)
 }

Within your Vuex store:

For mutations:

   setTest(state, payload){
      state.test = payload
   },

And for actions:

setTest: (context,val) => {context.commit('setTest', val)},

Your input should now be responsive and you can view the outcome in @{{test}}

To see how I manage user input with Vuex, click here: http://codepen.io/anon/pen/gmROQq

Answer 4

Avoid using v-model in this case. Instead, incorporate @input="test" into your input field and in the methods section:

 test(e){
    this.$store.dispatch('setTest', e.target.value)
 }

Within your Vuex store:

For mutations:

   setTest(state, payload){
      state.test = payload
   },

And for actions:

setTest: (context,val) => {context.commit('setTest', val)},

Your input should now be responsive and you can view the outcome in @{{test}}

To see how I manage user input with Vuex, click here: http://codepen.io/anon/pen/gmROQq

Answer 5

Answer №3

If you want to streamline your use of v-model in combination with Vuex, my library offers a solution:

Check out this library on GitHub for an easy integration.

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      ...takeState('user')
        .expose(['name', 'email'])
        .commit('editUser') // payload example: { name: 'Peter'}
        .map()
    }
  }
</script>

Answer 6

If you want to streamline your use of v-model in combination with Vuex, my library offers a solution:

Check out this library on GitHub for an easy integration.

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      ...takeState('user')
        .expose(['name', 'email'])
        .commit('editUser') // payload example: { name: 'Peter'}
        .map()
    }
  }
</script>

Answer 7

Answer №4

Remember, the computed property only allows for one-way binding. If you're looking for two-way binding, consider creating a setter function as suggested in other responses or utilize the data property instead.

import { store } from './app-store.js'

new Vue({
  el: '#navbar',
  store,
  data: function() {
    return { test: this.$store.getters.test };
  }
});

It's worth noting that using a setter can also help in validating input values efficiently.

Answer 8

Remember, the computed property only allows for one-way binding. If you're looking for two-way binding, consider creating a setter function as suggested in other responses or utilize the data property instead.

import { store } from './app-store.js'

new Vue({
  el: '#navbar',
  store,
  data: function() {
    return { test: this.$store.getters.test };
  }
});

It's worth noting that using a setter can also help in validating input values efficiently.

Vue input not reacting to v-model in Vuex state

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Switching image when hovering with mouse using javascript

A method to verify the presence of a specific element within a list using JavaScript

Tips for creating a helper function that returns a promise for a React hook function

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

What is the best way to obtain the value of a radio button using ajax?

Options for a web-based application that can handle multiple currencies

Issues with date clicking on FullCalendar in Angular

Creating a dynamic image slider that smoothly glides across a webpage

React Hooks findByID method is throwing an error stating that it cannot read the property 'params' because it is undefined

Tips for retrieving document body from a script embedded within document.write

What is the approach for capturing system or website sound using JavaScript?

JQuery UI Dialog not functioning properly as intended, failing to display

Click on the react item to view more information

What are the circumstances under which JavaScript GCP libraries return null values?

Issue with Modal functionality in Internet Explorer 9

Can the settings of the Firefox browser be modified using a Vue.js application?

What is the best way to decrease the transparency of the unselected 3D items when clicked on?

Increasing and decreasing the display of content using JQuery based on height rather than character count

Identifying and implementing page language in nextJS: Solving the ReferenceError "window is not defined" issue

Tips for launching a fresh window and embedding HTML into it with jQuery?