Vue js 选择默认值不显示

Posted 2023-02-23

【中文标题】Vue js 选择默认值不显示

【英文标题】：Vue js Select default value not displayed

【发布时间】：2020-09-21 01:13:12

【问题描述】：

我正在学习 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/

【问题讨论】：

您是否尝试过使用空 value 作为默认选项，并希望 NULL v-model 值与空 value 匹配？

嗨伊沃。是的，我做到了，但没有成功。

hi palash，我粘贴了一个指向 jsfiddle 的链接。请看看有没有帮助。

【参考方案1】：

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

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

请查看updated fiddle。

【讨论】：

好的。我注意到您为selected 1: null, 2: null, , 定义了固定值并且它有效。那么，如果我的结果会根据输入搜索的结果数量而有所不同，我该怎么办？用户将搜索他们想要找到托管商的所需城市的托管商。

对于每个需要预选默认选项的 SELECT，您需要定义 v-model 所指的变量——即使是 NULL 值。由于您决定将您的v-model 指向selected[key]，因此您需要这些keys 存在。