如何在 Vue 中传递一个选择的选定值或索引？
Posted
技术标签:
【中文标题】如何在 Vue 中传递一个选择的选定值或索引？【英文标题】：How does one pass the selected value or index of a select in Vue? 【发布时间】：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 请提供数据对象和店铺代码 【参考方案1】：methods:
onChange(event)
console.log(event.target.value);
【讨论】：
不幸的是事件未定义 @change="onChange()" 取出 "()" @change="onChange" 几乎完美。必须更改为 @change="this.onChange" 谢谢！【参考方案2】：我认为你应该试试这个：
https://***.com/a/50982499/7639883
您会在提供的 url 中找到两种方法：一种是使用简单的 JS 函数，另一种是使用 VueJs。
不要忘记使用参数更改onchange方法（如果使用JS），否则如果使用vue不要忘记更改@change="onChange"
【讨论】：
以上是关于如何在 Vue 中传递一个选择的选定值或索引？的主要内容，如果未能解决你的问题，请参考以下文章
如何选择过滤器并使用选定的值在 vue 应用程序中进行搜索？