javascript - 在 Vue.js 中获取选择的值

Question

好吧，我正在尝试获取选择的选定值。这是选择的 html 代码：

 <select id="employee">
  <option v-bind:key="employee" v-for="employee of employees" v-bind:value="{id: employee.id}">{{ employee.name }}</option>
</select><br><br>

这是我想将 select 的值打印到控制台的 JavaScript 代码。

console.log(document.getElementById('employee')[0].value)

标签： javascriptvue.jsselectvue-component

Answer 1

首先，我认为您在调用时不需要访问第 0 个元素getElementById。

console.log(document.getElementById('employee').value).

然后，您正在使用 vue！利用v-model.

以下代码未经测试，仅供参考。

<template>    
    <select id="employee" v-model="selectedEmployee">
        <option v-bind:key="employee" v-for="employee of employees" v-bind:value="{id: employee.id}">{{ employee.name }}</option>
    </select>
</template>
<script>
export default {
    data: {
        selectedEmployee: null
    },
    watch: {
        selectedEmployee: (newVal) => { console.log(newVal) }
    }
}
</script>

如果你v-model不了解 Vue，你就不知道 Vue。

阅读Vue 中的表单输入绑定