Vue.js 在选项之间切换时将先前的值更改回默认值

Question

我有一个包含多个选项的下拉菜单。所有选项都有显示变量。默认情况下，它设置为可用。如果我选​​择一个选项，显示值将更改为分配的名称。我想将之前选择的显示值更改回来当我在选项之间切换时可用。

            <div>
              <label class="label">Student Name</label>
            </div>
                  <div>
                    <select class="input"
                      :class="{ 'placeholder':  studentNameInput === 0 }"
                      v-model="studentNameInput"
                      @change= "verify('studentName')">
                      <option v-for="(student, index) in students"
                      v-if="student.display=== 'available' || student.display === 'studentName'"
                      :key="index"
                      :value="index">
                      {{ student.name }}
                      </option>
                    </select>
                  </div>
     
         **Method**
              verify(val){          
                if (val === 'studentName') {
                   this.studentName = this.students[this.studentNameInput].id;
                   this.students[this.studentNameInput].display = 'studentName';
              }
            }

Answer 1

您可以在v-model 上使用watcher 来检索oldValue，并在切换到newValue 时将其显示设置为available

watch: {
  studentNameInput: function (newValue, oldValue) {
    this.students[oldValue].display = 'available'
  }
}