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上绑定<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'
  }
}

Answer 2

要使text动态，应将bind设置为Vue组件实例的变量。可以通过在属性名称（这是:的缩写）前使用v-bind:前缀使HTML属性动态化并绑定到变量。

给出：

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

在组件中，您应该具有相应的variable声明：

data() {
   return {
      variable: '' // Variable initialisation
   }
}

Answer 3

MuratK可能是正确的，但是我知道您要绑定下拉项，而不是父元素。您可以通过v-for和文本绑定来实现，例如：

    <b-dropdown id="dropdown-1" class="m-md-2" >
      <b-dropdown-item v-for="item in items" v-text="item"></b-dropdown-item>
    </b-dropdown>

然后，在您的数据中将“项目”定义为字符串数组，例如['注销'，'首选项'，'签名']。您也可以使用此语法，在您的示例中也是如此：

    <b-dropdown-item v-for="item in items">{{ item }}</b-dropdown-item>