V-model directive with computed properties. about vuex HOT 6 CLOSED

See the form handling section: http://vuex.vuejs.org/en/forms.html

from vuex.

@airtonix can you post your exact solution with checkboxes/radio buttons please?

from vuex.

@yyx990803 that explains box fields (text/number/date/etc) form fields, but not select,radio or checkbox.

<label for="animalDogs">Dags</label>
<input type="radio"
       id="animalDogs"
       name="animal"
       value="dogs"
       :checked="animal === 'dogs'"
       @change="setAnimal">

<select name="animal" 
        @change="setAnimal">
  <option value="dogs"
          :selected="animal === 'dogs'">Dags</option>
  <option value="cats"
          :selected="animal === 'cats'">Cats</option>
</select>

import store from 'app/store';

export default {
  computed: {
    animal () {
       return store.state.animal;
    }
  },
  methods: {
    setAnimal: (type) {
      store.actions.setAnimal(type);
    }
  }
}

Is this about right?

from vuex.

nevermind, using this instead:
#38

from vuex.

really, is there something up with checboxes and radio yet?

from vuex.

You can use https://github.com/yarsky-tgz/vuex-dot for full support of reactive changes on vuex. Checkboxes work too, sure )

Example of simple value changing through incrementing\decrementing:

<template>
  <button @click.stop="step--">back</button>
  <button @click.stop="step++">next</button>
</template>

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

  export default {
    computed: {
      step: takeState('wizard.step') 
        .commit('setWizardStep')
        .map()
    }
  }
</script>

store/index.js

export default new Vuex.Store({
  state: {
    wizard: {
      step: 1
    }
  },
  mutations: {
    setWizardStep(state, step) {
      state.wizard.step = step;
    }
  }
});

from vuex.