Как Vue выбирает, будет ли выбрана опция выбора при запуске приложения?

avatar
alexk
8 апреля 2018 в 00:42
58
2
1

У меня есть это приложение: https://jsfiddle.net/punter/ggatev5k/1/, также опубликовано здесь:

<div id="app">

<select v-model="teamsSelected">
    <option v-for="team in teams" :value="{id: team.id, name: team.name}">{{team.name}}</option>
</select>

</div>

<script>
new Vue({
    el: '#app',
    data: {
        teams: [
            {id: 1, name: 'Bayern'},
            {id: 2, name: 'Manchester'},
            {id: 3, name: 'Barcelona'},
            {id: 4, name: 'PAOK'},
        ],
        teamsSelected: {id: 2, name: 'Manchester'},
    },
});
</script>

Я был удивлен, увидев, что опция стала выбранной, несмотря на то, что === не возвращает true между this.teams[1] и this.teamsSelected.

Поэтому Vue не полагается на ===, чтобы узнать, выберет ли он по умолчанию параметр из <select>. У него есть другой способ решить. Какой это путь? Описан ли этот способ где-нибудь в Интернете, в официальной документации или где-либо еще?

Спасибо.

Источник

Ответы (2)

avatar
acdcjunior
8 апреля 2018 в 04:03
1

Потому что в коде, где Vue решает, выбран ли option:

function setSelected (el, binding, vm) {
  actuallySetSelected(el, binding, vm);

На самом деле используется функция looseEqual() для сравнения:

function actuallySetSelected (el, binding, vm) {
  // ...
  for (var i = 0, l = el.options.length; i < l; i++) {
    // ...
    if (isMultiple) {
      // ...
    } else {
      if (looseEqual(getValue(option), value)) {
        if (el.selectedIndex !== i) {
          el.selectedIndex = i;
        }
        return
      }
  // ...
}

Как можно догадаться по имени, выполняет свободную проверку на равенство:

/**
 * Check if two values are loosely equal - that is,
 * if they are plain objects, do they have the same shape?
 */
function looseEqual (a, b) {


Причина?

Использование более слабого сравнения на равенство, естественно, является просто конструктивным решением. Но я смог отследить это и использование looseEqual было добавлено в исправить проблему (#3673)<768080997308808>2.

avatar
Tnc Andrei
10 апреля 2018 в 10:08
0

Это потому, что вы использовали директиву v-model https://vuejs.org/v2/api/#model

Выбранный вариант будет соответствовать модели. Если значение параметра не соответствует модели, по умолчанию ничего не будет выбрано.