JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.js"></script>
<div id="app">
<select name="Category" :value="category">
<option value="" disabled hidden>Select Product</option>
<option value="AC">AC</option>
<option value="TV">TV</option>
<option value="Mobile">Mobile</option>
<option value="Washing Machine">Washing Machine</option>
</select>
Selected Category : {{category}}
</div>
JavaScript
/* ----- Store ----- */
const state = {
category: "AC"
};
const mutations = {
SET_CAT (state, response) {
console.log("SET_CAT")
state.category = response
}
};
const actions = {
FETCH_CAT: (state) => {
}
}
const store = new Vuex.Store({
state,
mutations,
actions
});
new Vue({
el: '#app',
store,
data() {
return {
}
},
computed:{
category: {
get () {
return this.$store.state.category
},
set (value) {
console.log("Value of category changed")
this.store.commit("SET_CAT", value)
}
}
}
});