vue.js - Vue - 如何正确更改下拉文本？

Question

我有 Vue 下拉菜单。

 <b-dropdown id="dropdown-1" text= "UserName" class="m-md-2" >
       <b-dropdown-item class="dropdown-link">Log out</b-dropdown-item>
 </b-dropdown>

我需要更改下拉列表的值。就我而言，它是 用户名

我只发现了这种方式:

document.getElementById("dropdown-1").childNodes[1].innerHTML="new value"

我知道这不是正确的方法，但我没有找到正确的方法(通过 API 或类似的方法)。此方法也不起作用:

text= "{{ variable }}"

有任何想法吗？

Answer 1

您可以为 text 绑定(bind)动态值支持 <b-dropdown>并用<b-dropdown-item>的点击事件改变它

<b-dropdown :text="buttonTitle">
   <b-dropdown-item @click="buttonTitle = 'new value'">Log out</b-dropdown-item>
</b-dropdown>

//script
data () {
  return {
    buttonTitle: 'Username'
  }
}