How to use <select> v-model with vuex?

@elise_daugherty 

To use <select> with v-model and Vuex, you can follow these steps:

Step 1: Create a state in your Vuex store to hold the selected value. Suppose you have a store module named exampleModule, you can define a state property inside it like this:

1
2
3

state: {
  selectedValue: ''
}

Step 2: Create a mutation to update the selected value in the state. This mutation will be called whenever the <select> value changes. Add the following mutation to your exampleModule:

1
2
3
4
5

mutations: {
  setSelectedValue(state, value) {
    state.selectedValue = value;
  }
}

Step 3: In your component's template, use the <select> element and bind the v-model directive to the state property using computed property. Here is an example:

1
2
3
4
5
6
7

<template>
  <select v-model="selectedValue">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</template>

Step 4: In your component's script section, define a computed property to map the state property to the component's v-model value. Additionally, create a method to dispatch the mutation whenever the <select> value changes. Here is an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState('exampleModule', ['selectedValue'])
  },
  methods: {
    ...mapMutations('exampleModule', ['setSelectedValue'])
  }
}

With this setup, your <select> element will be bound to the selectedValue state in your Vuex store. Whenever the value changes, the setSelectedValue mutation will be called to update the state.