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

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

Вот как мы это делаем в jQuery. Я имею в виду текст выбранного варианта, а не значение.

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

Вот мой HTML

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

 {{customerName}}

Теперь, как я могу отобразить выбранный параметр под ним. как Ян, Доу, Хан?

ОТВЕТЫ

Ответ 1

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

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

и в методах Vue:

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

Но вы можете изменить его, чтобы получить innerText или что-то еще. Если вы используете jQuery, вы можете быть немного короче $(e).find(':selected').data('foo') или $(e).find(':selected').text().

Если вы привязываете модель к элементу select, она будет возвращать значение (если оно установлено) или содержимое опции, если значение не установлено (как при отправке формы).

** РЕДАКТИРОВАТЬ **

Я бы сказал, что ответ @MrMojoRisin - более элегантный способ решения этой проблемы.

Ответ 2

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

<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/[email protected]/dist/vue.js"></script>

Ответ 3

Я думаю, ваши значения должны быть в 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, вы можете использовать сложные данные, а значения не могли бы быть просто массивами. Тем не менее вы можете использовать ключ объекта и вместо него. Вот реализация.

Ответ 4

Вы можете использовать стиль Cohars, или вы также можете использовать методы. Данные хранятся в переменной options. Метод 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, показывающий demo

Ответ 5

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

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

Ответ 6

Вы можете найти это в документации 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/

Ответ 7

Вне шаблона я получаю доступ к имени параметра, например:

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

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

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

Поместите свои параметры в функцию data компонента <script>export default {function data(){return { options }}}</script>

Загрузите options в шаблон с помощью v:for:  <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>

Используйте @change="getOptionName" в элементе select:

<select @change="getOptionName">

В вашем methods получите имя:

getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }

Обратите внимание, что в этом случае object options в event.target.options не имеет ничего общего с вашими данными с именем options... надеюсь, что это позволит избежать путаницы

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

Ответ 8

Приведенный ниже код работал, чтобы получить текст из выбранной опции. Я добавил v-on: change, который вызывает функцию onChange() для элемента select.

methods:{
    onChange: function(e){
        var id = e.target.value;
        var name = e.target.options[e.target.options.selectedIndex].text;               
    },


 <select name="customerName" id="" v-on:change="onChangeSite($event)">
         <option value="1">Jan</option>
         <option value="2">Doe</option>
         <option value="3">Khan</option>
   </select>

Ответ 9

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

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