2
votes

Vue - Comment changer correctement le texte déroulant?

J'ai la liste déroulante Vue.

text= "{{ variable }}"

Je n'ai pas besoin de changer la valeur de la liste déroulante. Dans mon cas, c'est UserName

Je n'ai trouvé que de cette manière:

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

Je sais que ce n'est pas la bonne manière mais je n'ai pas t trouver le chemin correct (via l'API ou quelque chose comme ça). Cette méthode ne fonctionne pas non plus:

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

Des idées?

vue.js vue-component vuejs2

0 commentaires

3 Réponses :

0
votes

Pour rendre le texte dynamique, vous devez lier à une variable de votre instance de composant Vue. Un attribut HTML peut être rendu dynamique et lié à une variable en utilisant le préfixe : avant le nom d'attribut (qui est un raccourci de v-bind: )

Donné :

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

Dans le composant, vous devriez avoir la déclaration de variable correspondante:

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

0 commentaires

0
votes

MuratK a probablement raison, mais je comprends que vous souhaitez lier l'élément de liste déroulante, pas l'élément parent. Vous pouvez le faire avec un v-for et une liaison de texte, comme:

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

Ensuite, dans vos données, définissez 'items' comme un tableau de chaînes, comme ['log out', ' préférences »,« signez-le »]. Vous pouvez également utiliser cette syntaxe, elle en fait de même dans votre exemple:

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

0 commentaires

4
votes

Vous pouvez lier une valeur dynamique pour text prop sur et la modifier avec l'événement click de

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

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

0 commentaires