【发布时间】：2019-05-16 04:57:06
【问题描述】：
从问题来看，这似乎很简单，但是鉴于：
<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>
【问题讨论】：
-
你的意思是v-model,v-bind会导致错误吗？这应该很容易使用 V-model
-
看app，data部分是store。我不确定如何应用这些（有可能吗？）
-
@user10783878 请提供数据对象和店铺代码
标签： javascript vue.js vuex vue-router