Vue.js v-bind: значение для пустого объекта

Question

У меня есть выпадающий список, который заполнен массивом объектов.

<select v-model="selectedLeague" v-on:change="chooseLeague()">
    <option v-for="league in model.leagues" v-bind:value="league">
        {{  league.name }}
    </option>
</select>

При инициализации selectedLeague равен {}

Я хочу добавить параметр по умолчанию, который выбирается, когда объект пуст. Я попытался добавить

<option disabled v-bind:value=null>Choose League</option>

Но это не сработает, потому что оно никогда не равно нулю. Что я могу добавить, чтобы проверить, является ли объект пустым, используя привязку данных? Я использую версию 2.4.4 кстати

Answer 1

Поскольку selectedLeague изначально {}, вы можете использовать:

<option disabled v-bind:value="{}">Choose League</option>

Демо:

new Vue({
  el: '#app',
  data: {
    selectedLeague: {},
    model: {
    	leagues: [{name: 'leagueOne'},{name: 'leagueTwo'}]
    }
  },
  methods: {
    chooseLeague() { console.log('chooseLeague()', this.selectedLeague); }
  }
})

<script src="https://unpkg.com/vue@2.4.4"></script>

<div id="app">
  <select v-model="selectedLeague" v-on:change="chooseLeague()">
    <option disabled v-bind:value="{}">Choose League</option>
    <option v-for="league in model.leagues" v-bind:value="league">
      {{ league.name }}
    </option>
  </select>
</div>

Примечание: вы также можете добавить hidden, если хотите скрыть эту опцию из выпадающего списка:

<option disabled v-bind:value="{}" hidden>Choose League</option>