时间戳

首页 > 解决方案 > 将选项设置为选中

javascript - 将选项设置为选中

问题描述

我正在尝试使用watcho 更改select使用 vuejs 选择的选项。

这是我的选择：

<option v-for="option in options" v-bind:value="option._id" :id="option.iso">
  {{ option.name }}
 </option>

我的手表功能可在数据selectedValue更改时更改值

  watch: {
      selectedValue: function() {
          console.log(document.getElementById(this.selectedValue))
          document.getElementById(this.selectedValue).selected = "selected"
      },
...
}

它得到正确的元素。我也尝试过使用selected = true不工作。

不适selected用于选项...

标签： javascriptvue.jsvuejs2

解决方案

如果要在选择更改时处理选项值，可以为选择声明@change 事件：

<select v-model="selectedValue" @change="onSelectChange(selectedValue)">
  <option v-for="option in options" :value="option.value">
    {{option.value}}
  </option>
</select>

在事件处理程序中，您可以通过this或将值直接传递给方法来处理选定的值。我更喜欢第二个，它允许保持逻辑更清晰，并且只在上下文中工作，而不考虑所有数据变量。

  data() {
    const options= [{
      value: 100,
    },{
      value: 101,
    },{
      value: 102,
    }];
    return {
      options,
      selectedValue: null,
    };
  },

  methods: {
    onSelectChange(value) {
      // here you can handle a new value and set what you want, e.g.:
      const newValue = this.options[0].value; 
      this.selectedValue = newValue;
    },
  }

您可以运行此https://jsfiddle.net/igtulm/swj1u52x/3/

PS，请不要使用document.getElementById()等来修改绕过 Vue 的元素状态，这不是使用它的正确方法。

推荐阅读