On the surface, this question seems straightforward, but there are some complexities to consider. The scenario involves:
<select id="lstMash" @change="onChange()"><option value="valid">Valid</option><option value="warning">Warning</option><option value="error">Error</option></select>
The challenge here is to retrieve the selected option's value or index while using Vue, VueRouter, and Vuex.Store. In this case, utilizing v-model or v-bind directly with app data may not be feasible due to potential errors. How can one effectively access the necessary data to pass with the event in this context?
Your insights would be greatly appreciated! Additional details will be shared as needed.
Updates:
App:
var app = new Vue({
el: '#app',
router,
store,
components: { all, mash, boil, ferm }
});
Store:
const store = new Vuex.Store({
state: {
Mashing: [],
Boiling: [],
Fermenting: [],
// other state properties here
},
mutations: {
// mutation functions here
}
});
Template for All component:
<All id="all" v-show="$store.state.allShow">
<div>
<h3>Dashboard</h3>
<!-- Mashing Group -->
<div id="mashGroup" class="groups">
<div id="mashHead">
<h3>Mashing Status</h3><select id="lstMash" @change="onChange()"><option value="valid">Valid</option><option value="warning">Warning</option><option value="error">Error</option></select><button id="btnMashToggle" @click="btnMashToggle_Click()">{{this.$store.state.btnMashToggle}}</button></div>
<div id="allMash" v-show="$store.state.mashGroup">
<table id="tblMash" prefix="tblMash">
<tr id="tblHead">
<th>Status</th>
<th>Message</th>
<th>Time</th>
</tr>
<transition-group name='mashMessage'>
<tr v-for="m in $store.state.Mashing" :key="m.id" mode="out-in">
<td v-if="m.status=='valid'" class="valid">{{m.status}}</td>
<td v-else-if="m.status=='warning'" class="warning">{{m.status}}</td>
<td v-else-if="m.status=='error'" class="error">{{m.status}}</td>
<td>{{m.message}}</td>
<td>{{m.timestamp}}</td>
</tr>
</transition-group>
</table>
</div>
</div>
<!-- Boiling Group -->
<div id="boilGroup" class="groups">
<!-- boiling section content here -->
</div>
<!-- Fermenting Group -->
<div id="fermGroup" class="groups">
<!-- fermentation section content here -->
</div>
</div>
</All>