Vue js Select 默认值不显示

Question

我正在学习 Vue js，我正在使用v-for从数据库中列出一些数据。 有一个嵌套的v-for ，我在其中列出了select内的旅游标题。 所以当我给select一个标题的时候，它的描述如下。

我正在尝试使用上面的option和嵌套的v-for option设置默认值。 我尝试基于 v-model = "selected[item.id]" 但我无法使其工作。 越来越空白了是否可以在用户使用相同的v-model打开select框之前设置“选择游览”？

<div v-for="(item, index) in hosters" v-bind:key="item.id" class="col-md-6 mb-50">
    <h4 class="mb-0">{{ item.name }} {{ item.lastname }}</h4>

    <div class="tour-options-select">
        <select :id="'select-suggestions' + item.id" name="tour-options-dropdown"
                v-model="selected[item.id]" class="tour-options-dropdown"
                @change="showTour = selected">

            <option selected disabled>{{ selected.value }}</option>
            <option v-for="(tour, key) in item.tours" :key="key"
                    :value="tour.tourID">
                        {{ tour.title }}
            </option>
        </select>
    </div>

    // here each post is listed by selecting its title
    <div v-if="toursObj[selected[item.id]]" class="tour-suggestions">
        <div class="tour-list">
          <div class="tour-list-title">
             <p>{{ toursObj[selected[item.id]].title }}</p>
          </div>
          <div class="tour-list-description">   
                <p>{{ toursObj[selected[item.id]].description }}</p>
          </div>
       </div>
       <div @click="showTour = false" class="close-suggestions">
          <span>X</span>
       </div>
    </div>    
</div>

Vue

let app = new Vue({
   el: '#app',
   data: {
      hosters: {},
      selected: {
        value: 'Select a tour'
      },
      toursObj: {},
      advise: {
        isTrue: null,
        message: 'No hoster found'
      },
   },
  methods: {
   searchHoster: function () {
    axios.post('http://localhost/search/searchHoster.php', { "city": this.city }).then((response) => {

        if (response.data != "No hoster found") {
            this.advise.isTrue = false;
            this.hosters = response.data.hosters;
            console.log(this.hosters);

            const TOURS_OBJ = {};
            this.hosters.forEach(hoster => {
                hoster.tours.forEach(tour => {
                    TOURS_OBJ[tour.tourID] = tour;
                });
            });
            this.toursObj = TOURS_OBJ;
        } else {
            this.advise.isTrue = true;
            console.log(response.data);
        }

    }).catch((error) => {
        console.log(error);
    });
},

https://jsfiddle.net/phxjdbku/

Answer 1

您在 JSfiddle 上的示例存在以下问题：

1. SELECT 的v-model引用item.id - 但您的项目没有这样的属性
2. SELECT 的v-model指定您selected的 object 具有与每个主机的 ID 对应的键 - 但您的数据部分将selected定义为字符串而不是 Object
3. 您的默认选项没有value属性
4. 您的默认选项不会说Select a tour ，而是插入selected.value - 我们已经知道selected不可能有这样的键

请看一下更新的小提琴。