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 btw版本

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>

Vue.js v-bind：值为空对象

1 个答案: