Vue js 2 как отобразить выбранный атрибут в select

457

13 марта 2017, 10:42

есть такой код

    <div id="watch-example">
        <select v-model="selected">
          <option v-for="option in options" :value="option.value">
            {{ option.text }}
          </option>
        </select>
        <span>Выбрано: {{ selected }}</span>
    </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
    <script>
    var watchExampleVM = new Vue({
      el: '#watch-example',
      data: {
        selected: 'A',
        options: [
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
      }
    })

http://codepen.io/des1roer/pen/gmWZgO

а вот если я хочу отобразить выбранный текст (One, Two, Three) как быть?

cам код из

http://ru.vuejs.org/v2/guide/forms.html#Выпадающие-списки

Answer 1

new Vue({ 
  el: '#watch-example', 
  data: { 
    selected: 'A', 
    options: { 
      A: 'One', 
      B: 'Two', 
      C: 'Three' 
    } 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script> 
<div id="watch-example"> 
  <select v-model="selected"> 
    <!-- value будет ключами, т. е. "A", "B", "C", как и требовалось --> 
    <option v-for="(text, key) in options" :value="key"> 
      {{ text }} 
    </option> 
  </select> 
  <!-- Просто извлекаем значение по ключу --> 
  <span>Выбрано: {{ options[selected] }}</span> 
</div>