I have this app: https://jsfiddle.net/punter/ggatev5k/1/ , also posted here:
<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>
I was surprised to see that an option became selected, even though the === does not return true between this.teams[1] and this.teamsSelected.
Therefore Vue doesn't rely on === to see if it will select by default an option from <select>
. It has some other way to decide. Which way is that? Is that way described anywhere on the web, in the official documentation or elsewhere?
Thank you.