Изменить значение без триггера снова

Question

Я пытаюсь найти решение проблемы изменения двухсторонней привязки внутри часов того же свойства, избегая повторного вызова часов. например:

<select v-model="language">
  <option ... />
</select>


watch:{
  language(newVal // 'fr' , oldVal // 'en'){
    if(condition){
      // do something
    } else {
      // roll back to the old language
      this.language = "en" // will call watch again.

      // Looking for something like this:
      // Vue.set(this, 'language', 'en', { watch: false })
    }
  }
}

Я думал об использовании @change, но это не поможет, потому что мне нужно снова установить значение с помощью объекта, а не простого значения.

Я знаю, что могу использовать другое двустороннее свойство и использовать его как флаг, но я ищу что-то более элегантное.

Answer 1

Зачем откатывать выбор пользователя в первую очередь?Вы можете использовать computed property для предоставления отфильтрованного списка допустимых опций, чтобы обеспечить лучший пользовательский опыт.

В приведенном ниже примере вы можете выбрать en только в том случае, если флажок условия имеет значение true.

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  template: `
    <div>
      <p>Condition: <input type="checkbox" v-model="condition" /></p>
      <p>Selection: {{selection}}</p>
      <select v-model="selection">
        <option v-for="opt in filteredOptions" :key="opt.value" :value="opt.value">{{opt.label}}</option>
      </select>
    </div>
  `,
  data: () => ({
    selection: undefined,
    condition: true,
    options: [
      { label: 'English', value: 'en' },
      { label: 'French', value: 'fr' },
      { label: 'Spanish', value: 'es' },
    ],
  }),
  computed: {
      filteredOptions() {
        return this.condition ? this.options.filter(x => x.value === 'en') : this.options;
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>