Vue - Как правильно изменить выпадающий текст? - PullRequest
Новая
       10

Vue - Как правильно изменить выпадающий текст?

0 голосов
/ 10 июня 2019

У меня выпадающий список 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 }}"

Есть идеи?

Ответы [ 3 ]

1 голос
/ 10 июня 2019

Вы можете привязать динамическое значение для text prop к <b-dropdown> и изменить его с помощью события click <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'
  }
}
0 голосов
/ 10 июня 2019

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>

Затем в ваших данных определите «items» как массив строк, таких как ['log out', 'Предпочтения', 'подписать его'].Вы также можете использовать этот синтаксис, он делает то же самое в вашем примере: 

    <b-dropdown-item v-for="item in items">{{ item }}</b-dropdown-item>
0 голосов
/ 10 июня 2019

Чтобы сделать text динамическим, вы должны привязать к переменной вашего экземпляра компонента Vue.Атрибут HTML можно сделать динамическим и привязать к переменной с помощью префикса : перед именем атрибута (что является сокращением v-bind:)

Дано: 

<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
   }
}
...