javascript - 通过单击 Vuejs 中的另一个按钮来更改下拉显示文本

Question

我有一个下拉列表：

            <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"因为我可以在日志中看到它，但下拉列表的显示文本没有改变。我应该怎么做才能更改下拉文本的显示值？

标签： javascripthtmljqueryvue.jsdrop-down-menu

Answer 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"
            />

这只是一个猜测，因为我无法看到所有细节。