CODEWITHSUNDEEP
vue.js
user2410266
user2410266

Reputation: 551

Vue.js Change previuos value back to default when switching between options

I have an dropdown with multiple options.All options has display variable .By default it is set to available .If i select an option the display value changes to assigned name..I would like to change the previous selected display value back to available when i switch between options.

            <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';
              }
            }

Upvotes: 0

Views: 406

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50797

You can use a watcher on your v-model to retrieve the oldValue and set it's display to available when switching to a newValue

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

Upvotes: 1

Related Questions