web-dev-qa-db-fra.com

Comment obtenir le texte de l'option sélectionnée en utilisant vuejs?

Je souhaite obtenir le texte d’une entrée d’option sélectionnée et l’afficher ailleurs. Je sais comment faire avec jQuery mais je veux savoir comment faire avec Vuejs.

Voici ce que nous faisons dans jQuery. Je veux dire le texte de l'option sélectionnée pas la valeur.

var mytext = $("#customerName option:selected").text();

Voici mon HTML

    <select name="customerName" id="">
         <option value="1">Jan</option>
         <option value="2">Doe</option>
         <option value="3">Khan</option>
   </select>

 {{customerName}}

Maintenant, comment puis-je afficher l'option sélectionnée en dessous? comme Jan, Doe, Khan?

javascriptvue.js
14
Hujjat Nazari

J'ai eu ce problème, où je devais obtenir un attribut de données d'une option sélectionnée, voici comment je l'ai traité:

<select @change="handleChange">
    <option value="1" data-foo="bar123">Bar</option>
    <option value="2" data-foo="baz456">Baz</option>
    <option value="3" data-foo="fiz789">Fiz</option>
</select>

et dans les méthodes Vue:

methods: {
    handleChange(e) {
        if(e.target.options.selectedIndex > -1) {
            console.log(e.target.options[e.target.options.selectedIndex].dataset.foo)
        }
    }
}

Mais vous pouvez le changer pour obtenir innerText ou autre chose. Si vous utilisez jQuery, vous pouvez utiliser $(e).find(':selected').data('foo') ou $(e).find(':selected').text() pour être un peu plus court.

Si vous liez un modèle à l'élément select, la valeur (si définie) ou le contenu de l'option ne sera renvoyée que si aucune valeur n'est définie (comme lors de la soumission d'un formulaire).

** MODIFIER ** 

Je dirais que la réponse donnée par @MrMojoRisin est un moyen beaucoup plus élégant de résoudre ce problème.

21
Ben Harvey

Au lieu de définir la valeur uniquement en tant qu'id, vous pouvez lier la valeur sélectionnée à un objet comportant deux attributs: valeur et texte .

<div id="app">
   <select v-model="selected">
       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">
         {{ product.name }}
       </option>
   </select>
</div>

Ensuite, vous pouvez accéder au texte via la "valeur":

   <h1>Value:
     {{selected.id}}
   </h1>
   <h1>Text:
     {{selected.text}}
   </h1>

Exemple de travail

var app = new Vue({
  el: '#app',
  data: {
  	selected: '',
    products: [
      {id: 1, name: 'A'},
      {id: 2, name: 'B'},
      {id: 3, name: 'C'}
    ]
  }
})
<div id="app">
   <select v-model="selected">
       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}
       </option>
   </select>
   <h1>Value:
   {{selected.id}}
   </h1>
   <h1>Text:
   {{selected.text}}
   </h1>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

24
MrMojoRisin

Je suppose que vos valeurs devraient être dans le SC. Ensuite, vous pouvez facilement le manipuler. Simplement en ajoutant: 

data: {
  selected: 0,
  options: ['Jan', 'Doe', 'Khan']
}

Votre balisage sera plus propre: 

<select v-model="selected">
  <option v-for="option in options" value="{{$index}}">{{option}}</option>
</select>
<br>
<span>Selected: {{options[selected]}}</span>

Voici la mise à jour JSFiddle

Comme Th1rdey3 l'a fait remarquer, vous souhaiterez peut-être utiliser des données complexes et les valeurs ne pourraient pas être simplement des index de tableau. Vous pouvez toujours utiliser une clé d’objet au lieu de l’index. Voici la mise en œuvre .

2
Cohars

Vous pouvez utiliser le style Cohars ou des méthodes. Les données sont conservées dans la variable optionsname__. La méthode showTextrecherche le texte des valeurs sélectionnées et le renvoie. L’un des avantages est que vous pouvez enregistrer le texte dans une autre variable, par exemple. selectedTextname__

HTML: 

<div id='app'>
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <br>
  <span>Selected: {{ showText(selected) }}</span>
</div>

JAVASCRIPT: 

var vm = new Vue({
  el: '#app',
  data: {
    selected: 'A',
    selectedText: '',
    options: [{
      text: 'One',
      value: 'A'
    }, {
      text: 'Two',
      value: 'B'
    }, {
      text: 'Three',
      value: 'C'
    }]
  },
  methods: {
    showText: function(val) {      
      for (var i = 0; i < this.options.length; i++) {
        if (this.options[i].value === val){
          this.selectedText = this.options[i].text;
          return this.options[i].text;
        }
      }
      return '';
    }
  }
});

JSFiddle montrant demo

1
th1rdey3

En supposant que vous ayez une liste de clients et un client sélectionné sur votre modèle, un exemple comme ci-dessous devrait fonctionner parfaitement:

<select v-model="theCustomer">
    <option :value="customer" v-for="customer in customers">{{customer.name}}</option>
</select>
<h1>{{theCustomer.title}} {{theCustomer.name}}</h1>
1
Gorky

Vous pouvez le trouver dans la documentation Vue ici: http://vuejs.org/guide/forms.html#Select

Utiliser v-model:

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

Dans votre cas, je suppose que vous devriez faire:

<select name="customerName" id="" v-model="selected">
     <option>Jan</option>
     <option>Doe</option>
     <option>Khan</option>
</select>

{{selected}}

Voici un violon qui fonctionne: https://jsfiddle.net/bqyfzbq2/

0
Mteuahasan