如何在 Vue 中传递 selected 值或 select 的索引？

Question

从问题来看这似乎简单易行，但是鉴于：

<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 在应用程序中使用数据，在我的情况下不存在（使用只会导致错误）。我怎样才能获得与事件一起传递的所需数据，或者如果这是一种不正确的方法，一般情况下如何？

提前致谢！ 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>

Answer 1

methods: {
  onChange(event) {
    console.log(event.target.value);
  }
}

Answer 2

我认为你应该试试这个：

您会在提供的 url 中找到两种实现此目的的方法：一种使用简单的 JS 函数，一种使用 VueJs 实现。

不要忘记用参数更改 onchange 方法（如果使用 JS）否则如果使用 vue 不要忘记更改 @change="onChange"

如何在 Vue 中传递 selected 值或 select 的索引？

How does one pass the selected value or index of a select in Vue?

javascript

vue.js

vue-router

vuex