Выпадающий первый элемент VueJs не выбран при начальной загрузке

Question

У меня есть опция раскрывающегося списка, работающая с массивом элементов.Я хочу добавить первый выбор / опцию как Выбрать сайт .

Когда элемент отображается, в раскрывающемся списке не отображается Выберите сайт изначально.Элемент раскрывающегося списка имеет массив в раскрывающихся меню.

• Первое изображение показывает начальное состояние раскрытиявниз (выглядит пустым, но его нет)

• Второе изображение, когда выпадающий элемент выбран.

Как раскрывающийся список, работающий с Выберите сайт , показанный в качестве первого варианта?

<select id="ddSite" name="ddSite" class="form-control m-b-10" v-on:change="onChangeSite($event)" v-model="ddSite">
    <option :value="null">-- Select a Site --</option>
    <option v-for="option in sites" v-bind:value="option.SiteId">
        {{ option.SiteName }}
    </option>
</select>




new Vue({
        el: '#app',
        data: {
            sites: [],
            ddSite:""
        },
        mounted() {
            axios.get("/api/sites/" + this.companyid)
                .then(response => {
                    this.sites = response.data
                });
        },
        methods: {
            onChangeSite: function (e) {
                var self = this;
                var siteid = e.target.value;
                var sitename = e.target.options[e.target.options.selectedIndex].text;
            },

Answer 1

В своем коде вы привязываете значение выбора к ddSite.

Параметр -- Select a Site -- имеет значение null, но ваши данные ddSite начинаются как пустая строка.

Чтобы изначально выбрать эту опцию, вы должны инициализировать ddSite как null:

new Vue({
  el: '#app',
  data: {
    ddSite: null,
    sites: [{
        SiteId: 1,
        SiteName: 'Google',
      },
      {
        SiteId: 2,
        SiteName: 'Facebook',
      },
      {
        SiteId: 3,
        SiteName: 'StackOverflow',
      },
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="ddSite" name="ddSite" v-model="ddSite">
    <option :value="null">-- Select a Site --</option>
    <option v-for="option in sites" :value="option.SiteId">
      {{ option.SiteName }}
    </option>
  </select>
</div>