Установить вариант как выбранный

Question

Я пытаюсь использовать watch o для изменения параметра 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 не применяется к опции ...

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> в официальной документации , если хотите.

---

Зеркало CodePen

---

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>