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>

初始加载时未选择VueJ下拉第一项

1 个答案: