如何使用Vue 2连接选项HTML元素中的条件块?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (125)

我刚开始使用Vue,在选项元素中有一个条件渲染(v-if)的问题。当我有一个空数组时,我想显示一个禁用的选项,否则它会显示给我国家。就像这个描述https:/vuejs.org/v2/Guide/ontional.html但不幸的是,这并不适用于一个选项HTML元素。我错过了什么?

new Vue({

  el: '#app',

  data: {

    selected: '',

    optionAvailable: true,

    countries: [

                //{ name: 'USA', population: '300M' }, 
                //{ name: 'Canada', population: '100M' }, 
                //{ name: 'Germany', population: '80M' },           

               ]

  },

  created() {

    if(!this.countries.length > 0) {

        return this.optionAvailable = false;

    }

    return true;

  },

  methods: {

    onChange(event) {

        this.selected = event.value;

    }

  }

})

HTML:

<div id="app">

  <select @change="onChange($event.target)">

    <option v-if="optionAvailable" v-for="(country,index) in countries" :value="country.population">{{ country.name }}</option>

    <option v-else disabled>-</option>

  </select>
  <br>

  <span>{{ selected }}</span>
</div>
提问于
用户回答回答于

试试这个:

模板

<div id="app">
  <select @change="onChange($event.target)">
      <option v-if="countries.length" v-for="(country,index) in countries" :value="country.population">{{ country.name}}</option>
      <option v-else>----</option>
  </select>
  <span>{{ selected }}</span>
</div>

脚本:

new Vue({
  el: '#app',
  data: {
    selected: '',
    optionAvailable: true,
    countries: [
            { name: 'USA', population: '300M' }, 
      { name: 'Canada', population: '100M' }, 
      { name: 'Germany', population: '80M' } ]    
    },
  methods: {
    onChange(event) {
        this.selected = event.value;
    }
  }
})

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励