Это кажется простым и легким из вопроса, однако. Дано:
<select id="lstMash" @change="onChange()"><option value="valid">Valid</option><option value="warning">Warning</option><option value="error">Error</option></select>
Мне нужно получить значение или индекс выбранной опции.Я использую Vue, VueRouter и Vuex.Store.При этом v-модель, v-bind используют данные в приложении, которых в моем случае не существует (использование приведет только к ошибкам).Как я могу получить необходимые данные для передачи с событием, или как вообще, если это неправильный метод?
Заранее спасибо!Ps.любая дополнительная необходимая информация будет опубликована
РЕДАКТИРОВАТЬ:
Приложение:
var app = new Vue({
el: '#app',
router,
store,
components: { all, mash, boil, ferm }
});
Магазин:
const store = new Vuex.Store({
state: {
Mashing: [],
Boiling: [],
Fermenting: [],
btnMashToggle: '^',
btnBoilToggle: '^',
btnFermToggle: '^',
allShow: false,
mashShow: false,
boilShow: false,
fermShow: false,
mashGroup: true,
boilGroup: true,
fermGroup: true,
channel: "",
status: "",
message: "",
timestamp: ""
},
mutations: {
// Adds new message
newmessage: function(state, message) {
switch (message.channel) {
case "mashing":
store.state.Mashing.push(new Message(Message.id, message.channel, message.status, message.message, message.timestamp));
break;
case "boiling":
store.state.Boiling.push(new Message(Message.id, message.channel, message.status, message.message, message.timestamp));
break;
case "fermentation":
//store.increment(new Message(Message.id, message.channel, message.status, message.message, message.timestamp));
store.state.Fermenting.push(new Message(Message.id, message.channel, message.status, message.message, message.timestamp));
break;
default:
break;
}
},
// Loads Stored Messages
loadInit: function(msg) {
for (m in msg) {
switch (msg.channel) {
case "mashing":
store.state.Mashing.push(new Message(Message.id, m.channel, m.status, m.message, m.timestamp));
break;
case "boiling":
store.state.Boiling.push(new Message(Message.id, m.channel, m.status, m.message, m.timestamp));
break;
case "fermentation":
//store.increment(new Message(Message.id, message.channel, message.status, message.message, message.timestamp));
store.state.Fermenting.push(new Message(Message.id, m.channel, m.status, m.message, m.timestamp));
break;
default:
break;
}
}
},
// Toggles Mashing Section on All Page
toggleMash: state => {
state.mashGroup = !state.mashGroup;
state.btnMashToggle = state.mashGroup ? '^' : 'v';
},
// Toggles Boiling Section on All Page
toggleBoil: state => {
state.boilGroup = !state.boilGroup;
state.btnBoilToggle = state.boilGroup ? '^' : 'v';
},
// Toggles Fermenting Section on All Page
toggleFerm: state => {
state.fermGroup = !state.fermGroup;
state.btnFermToggle = state.fermGroup ? '^' : 'v';
}
}
});
Все Шаблон для компонента:
<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">
<div id="boilHead">
<h3>Boiling Status</h3><select id="lstBoil"></select><button id="btnBoilToggle" @click="btnBoilToggle_Click()">{{this.$store.state.btnBoilToggle}}</button></div>
<div id="allBoil" v-show="$store.state.boilGroup">
<table id="tblBoil" prefix="tblBoil">
<tr id="tblHead">
<th>Status</th>
<th>Message</th>
<th>Time</th>
</tr>
<transition-group name='boilMessage'>
<tr v-for="b in $store.state.Boiling" :key="b.id" mode="out-in">
<td v-if="b.status=='valid'" class="valid">{{b.status}}</td>
<td v-else-if="b.status=='warning'" class="warning">{{b.status}}</td>
<td v-else-if="b.status=='error'" class="error">{{b.status}}</td>
<td>{{b.message}}</td>
<td>{{b.timestamp}}</td>
</tr>
</transition-group>
</table>
</div>
</div>
<!-- Fermenting Group -->
<div id="fermGroup" class="groups">
<div id="fermHead">
<h3>Fermentation Status</h3><select id="lstFerm"></select><button id="btnFermToggle" @click="btnFermToggle_Click()">{{this.$store.state.btnFermToggle}}</button></div>
<div id="allFerm" v-show="$store.state.fermGroup">
<table id="tblFerm" prefix="tblFerm">
<tr id="tblHead">
<th>Status</th>
<th>Message</th>
<th>Time</th>
</tr>
<transition-group name='fermMessage'>
<tr v-for="f in $store.state.Fermenting" :key="f.id" mode="out-in">
<td v-if="f.status=='valid'" class="valid">{{f.status}}</td>
<td v-else-if="f.status=='warning'" class="warning">{{f.status}}</td>
<td v-else-if="f.status=='error'" class="error">{{f.status}}</td>
<td>{{f.message}}</td>
<td>{{f.timestamp}}</td>
</tr>
</transition-group>
</table>
</div>
</div>
</div>
</All>