В Vue, когда опции элемента select недоступны сразу, начальное состояние отличается в зависимости от того, используется ли v-модель или привязки значения / ввода

Question

См. Ниже два выбора, единственное различие между ними заключается в том, что второй использует привязку значений и привязку входных событий. После заполнения массива параметров их значения должны быть одинаковыми («два»), но это не то, что я вижу.

Конечно, если мы изменим значение с помощью выпадающего меню, то все будет хорошо. Но начальное состояние отличается. Я читал, что v-модель - это syntacti c сахар для v-bind: value и v-on: input, но, похоже, это не так.

В моем случае я не могу использовать v-модель (значение не может быть установлено напрямую, поэтому мне нужно использовать привязки значения / ввода). Есть предложения?

console.clear()

let app = new Vue({
  el: '#app',
  data: {
    x: 2,
    options: []
  }
})
app.options = [
    { text: 'One', id: 1 },
    { text: 'Two', id: 2 },
    { text: 'Three', id: 3 }
];

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="app">

  <select v-model="x">
    <option v-for="o in options" :value="o.id">{{ o.text }}</option>
  </select>
  <span>{{ x }}</span>
  
  <br>
  
  <select :value="x" @input="x = $event.target.value">
    <option v-for="o in options" :value="o.id">{{ o.text }}</option>
  </select>
  <span>{{ x }}</span>
</div>

Answer 1

Обновление:

Если вам это действительно нужно, вы можете обойти эту проблему с selected, но обновите версию Vue до последней, потому что с версией, которую вы используете, будут проблемы.

<select :value="x" @input="x = $event.target.value">
  <option v-for="o in options" :value="o.id" :selected="x===o.id">{{ o.text }}</option>
</select>

Полный пример здесь

Оригинал:

Все в порядке с вашими привязками. Вы должны получить параметры перед созданием Vue экземпляра, а затем поместить его в data

let options = [
  { text: 'One', id: 1 },
  { text: 'Two', id: 2 },
  { text: 'Three', id: 3 }
]

let app = new Vue({
  el: '#app',
  data: {
    x: 2,
    options
  }
})

Или использовать обычные Vue ловушки жизненного цикла, такие как created, и получить параметры в этот момент

let app = new Vue({
  el: '#app',
  data: {
    x: 2,
    options: []
  },
  created () {
    this.options = [
      { text: 'One', id: 1 },
      { text: 'Two', id: 2 },
      { text: 'Three', id: 3 }
    ]
  }
})