Как связать условный блок в HTML-элементе option с помощью vue 2

Question

Я новичок в vue и у меня проблема с условным рендерингом (v-if) в элементе option. когда у меня есть пустой массив, я хотел бы показать отключенную опцию, иначе он покажет мне страны. Как и в этом описании https://vuejs.org/v2/guide/conditional.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>

здесь jsfiddle:

https://jsfiddle.net/50wL7mdz/434002/

Answer 1

попробуйте этот шаблон

    <div id="app">

  <select @change="onChange($event.target)" :disabled="!countries.length">

    <option v-if="!countries.length" value="">No available countries</option>

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

  </select>
  <br>

  <span>{{ selected }}</span>
</div>

Сценарий

   new Vue({

  el: '#app',

  data: {
    selected: '',
    countries: []              
  },


  methods: {

    onChange(event) {

        this.selected = event.value;

    }

  }

})

Answer 2

Попробуйте это:
шаблон

<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;
    }
  }
})

Вам не нужен созданный крюк. Вы можете v-if указать длину countries напрямую.

https://jsfiddle.net/z4mu8L9e/8/