Как получить текст выбранной опции с помощью vuejs?

вместо того, чтобы определять значение только как id, можно связать выбранное значение с объектом с двумя атрибутами: value и text. Например с продуктами:

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

затем вы можете получить доступ к тексту через "значение":

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

пример работающего

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/vue@2.4.4/dist/vue.js"></script>

Я думаю, ваши значения должны быть в JS. Тогда вы можете легко манипулировать им. Просто добавив:

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

ваша разметка будет чище:

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

вот обновление JSFiddle

Как указал th1rdey3, вы можете использовать сложные данные, а значения не могут быть простыми индексами массива. Тем не менее, вы можете использовать и object key вместо индекса. вот реализация.

предполагая, что у вас есть список клиентов и выбранный клиент на вашей модели, пример, как показано ниже, должен работать идеально:

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

вы можете узнать это в документации Vue здесь:http://vuejs.org/guide/forms.html#Select

использование v-модели:

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

в вашем случае, я думаю, что вы должны сделать :

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

{{selected}}

вот рабочая скрипка:https://jsfiddle.net/bqyfzbq2/

вы можете использовать стиль Cohars или вы можете использовать методы тоже. Данные хранятся в options переменной. The showText метод находит текст выбранных значений и возвращает его. Одним из преимуществ является то, что вы можете сохранить текст в другую переменную, например selectedText

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 показывает демо

вне шаблона я получаю доступ к имени опции следующим образом:

let option_name = this.options[event.target.options.selectedIndex].name

для этого возьмите этот подход, чтобы настроить шаблон:

определил ваши параметры в массиве, как [{"name":"Bar","value":1},{"name":"Baz","value":2}] ... и т. д.

Поместите свои варианты в

Я думаю, что некоторые из ответов здесь немного слишком сложны, поэтому я хотел бы предложить более простое решение. Я только собираюсь использовать обработчик событий в Примере и опустить такие вещи, как привязка модели и т. д.

<select @change="yourCustomMethod">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

затем в вашем экземпляре Vue:

...
methods: {
    yourCustomMethod: function(event) {
        var key = event.target.value, // example: 1
            value = event.target.textContent; // example: One
    }
}
...