原因？

Question

我有这个应用程序：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>

我很惊讶地看到一个选项被选中，即使=。在this.teams [1]和this.teamsSelected之间没有返回=。

因此，Vue不依赖于=来查看它是否默认选择来自<select>的选项。它还有其他一些方法可以决定。那是哪种方式？这种方式是在网络，官方文档或其他地方描述的吗？

谢谢。

Answer 1

因为在代码中Vue decides if an option is selected：

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

实际上要比较uses a looseEqual() function：

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

其中，您可以通过名称推断does a loose equality check：

looseEqual

原因？

使用更宽松的平等比较自然只是一个设计决策。但我可以将track it和NT Kernel and System用法添加到fix an issue (#3673)。

Answer 2

这是因为您使用了v-model指令 https://vuejs.org/v2/api/#model

所选选项将是与模型匹配的选项。如果没有选项值与模型匹配，则默认情况下不会选择任何内容。

Vue如何选择应用程序启动时是否会选择一个选择选项？

2 个答案:

原因？