Vue js 选择默认值不显示

Question

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

我正在尝试使用option 上方的option 和嵌套的v-for 设置默认值。我尝试基于 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 对象具有与每个主机 ID 对应的键 - 但您的数据部分将 selected 定义为字符串而不是对象
3. 您的默认选项没有value 属性
4. 您的默认选项不是 Select a tour，而是插入 selected.value - 我们已经知道 selected 不可能有这样的密钥

请查看updated fiddle。