Question

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

这是我的选择：

<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不适用于该选项...

Answer 1

如果要在选择更改时处理选项值，则可以为选择声明@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/

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

Answer 2

类似的事情应该起作用。您想在v-model上使用<select>来获取当前选择的值/项目。

如果愿意，您可以阅读有关Vue和<select> in the official documentation的更多信息。

CodePen mirror

new Vue({
  el: "#app",
  data: {
    options: ["Blue", "Green", "Red"],
    selected: '', // selected item lives here
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>


<div id="app">
  <div>
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option v-for="(option, index) in options" :key="index">{{ option }}</option>
    </select>
    <div style="margin-top: 70px;">
      <span>Selected: <span :style="{color: selected}">{{ selected }}</span></span>
    </div>
  </div>
</div>

将选项设置为选中

2 个答案: