如何使用 Vue js 获取选项标签的 value 属性的值？

Question

我有一个呈现选择标签的组件。 select标签包含了月份的十二个选项，每个选项都有value属性，这个属性有一个数字，每个月从1到12，所以我想获取选中的option标签的这个value属性的值然后将此值与我的组件的 de data 属性的变量同步。我正在使用 Vue JS。

<select v-model="month" class="form-control form-control-sm">
<option>Selecciona el mes</option>
<option  value="1">Enero</option>
<option  value="2">>Febrero</option>
<option  value="3">>Marzo</option>
<option  value="4">>Abril</option>
<option  value="5">>Mayo</option>
<option  value="6">>Junio</option>
<option  value="7">>Julio</option>
<option  value="8"> >Agosto</option>
<option  value="9">>Septiembre</option>
<option  value="10">>Octubre</option>
<option  value="11">>Noviembre</option>
<option  value="12">>Diciembre</option>
</select> 

Answer 1

你可以这样做： https://jsfiddle.net/5k1fc9tj/

但是如果你通过数据而不是通过 html 标记来做会更好： https://jsfiddle.net/5k1fc9tj/1/

<div id="app">
  You select {{ selectedMonthName }}
  <br />
  <select v-model="selectedMonth" class="form-control form-control-sm">
    <option value="null">Selecciona el mes...</option>
    <option v-for="month in monthes" :value="month.id">{{ month.name }}</option>
  </select> 
</div>

---

new Vue({
  el: "#app",
  data: {
    selectedMonth: null,
    monthes: [
      {id: "1", name: "Enero" },
      {id: "2", name: "Febrero" },
      {id: "3", name: "Marzo" },
      {id: "4", name: "Abril" },
      {id: "5", name: "Mayo" },
      {id: "6", name: "Junio" },
      {id: "7", name: "Julio" },
      {id: "8", name: "Agosto" },
      {id: "9", name: "Septiembre" },
      {id: "10", name: "Octubre" },
      {id: "11", name: "Noviembre" },
      {id: "12", name: "Diciembre" },
    ],
  },
  computed: {
    selectedMonthName() {
        for (let month of this.monthes) {
        if (month.id === this.selectedMonth) {
            return month.name;
        }
      }
      return 'nothing :)'
    },
  },
});