изменение отображаемого текста в выпадающем списке нажатием на другую кнопку в Vuejs

#javascript #html #jquery #vue.js #drop-down-menu

#javascript #HTML #jquery #vue.js #выпадающее меню

Вопрос:

У меня есть выпадающий:

             <BaseDropdown
              @input="value => statusSelected(value)"
              name="Status"
              ref="status"
              label="Status:"
              rules="required"
              :options="statusItems"
              v-model="status"
              value="status"
              placeholder="Please select a status"
            />
  

И кнопка:

 <button class="edit" @click="editComment(status)">Edit </button>
  

Значение параметра status равно "note" . У меня есть эта функция:

 editComment(status){
      this.status = status
}
  

Это изменяет значение v-model на "note" , поскольку я вижу это в журнале, но отображаемый текст выпадающего списка не меняется. Что я должен сделать, чтобы изменить отображаемое значение выпадающего текста?

Ответ №1:

Было бы полезно посмотреть компонент BaseDropdown или сделать скриншот, чтобы наглядно представить, что вы имеете в виду. Недостаточно информации, чтобы увидеть, что делает этот компонент.

Однако я вижу, что вам понадобится другая переменная и вычисляемое свойство. status и editStatus .

 computed:{
  displayStatus(){
    return this.editStatus || this.status;
  }
},
methods: {
  editComment(status){
      this.editStatus = status
  }
}
  
 <BaseDropdown
              @input="value => statusSelected(value)"
              name="Status"
              ref="status"
              label="Status:"
              rules="required"
              :options="statusItems"
              v-model="status"
              value="displayStatus"
              placeholder="Please select a status"
            />
  

Это всего лишь предположение, потому что я не могу видеть все детали.