从问题来看，这似乎很简单，但是考虑到:
<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-model、v-bind 使用应用程序中的数据，在我的情况下不存在(使用只会导致错误)。我如何获取事件传递所需的数据，或者如果这是一个不正确的方法，一般如何获取？
提前致谢!诗。任何需要的附加信息将被发布
编辑:
应用程序:
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>
最佳答案
methods: {
onChange(event) {
console.log(event.target.value);
}
}
关于javascript - 如何在 Vue 中传递 select 的选定值或索引？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53787886/