Javascript 如何在Vue中传递select的选定值或索引？

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

<select id="lstMash" @change="onChange()"><option value="valid">Valid</option><option value="warning">Warning</option><option value="error">Error</option></select>

商店：

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>

仪表板
Mashing StatusValidWarningError{{{this.$store.state.btnMashToggle}
地位
消息
时间
{{m.status}}
{{m.status}}
{{m.status}}
{{m.message}}
{{m.timestamp}
沸腾状态{{this.$store.state.btnboiltogle}
地位
消息
时间
{{b.status}}
{{b.status}}
{{b.status}}
{{b.message}}
{{b.timestamp}
发酵状态{{this.$store.state.btnfermtokle}
地位
消息
时间
{{f.status}}
{{f.status}}
{{f.status}}
{{f.message}}
{{f.timestamp}

我想你应该试试这个：

在提供的url中可以找到两种方法：一种是使用简单的JS函数，另一种是使用VueJs

---

不要忘了用参数更改onchange方法（如果使用JS），否则如果使用vue，不要忘了像

@change=“onchange”

那样更改，你说v-model、v-bind会导致错误是什么意思？这应该是非常容易与V型看到应用程序，数据部分是一个商店。我不确定如何应用这些（可能吗？@user10783878请提供数据对象和存储代码不幸的是，事件是undefined@change=“onChange（）”take out（）“@change=“onChange”几乎完美无瑕。必须更改为@change=“this.onChange”谢谢！

<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);
  }
}