Javascript Vue js使用相同的select保持上一个元素打开

这是我的第一个Vue.js项目，我正在通过CDN使用它来列出数据库中的一些数据。我用嵌套的v-for来列出用户及其帖子。在每个主要的v-for里面，我有一个选择的加载帖子标题和另一个v-for。当我选择一个标题时，我想打开相应的帖子

它几乎100%有效。我的问题是，当我在第二个用户中选择一个新选项标题时，打开的第一篇文章正在关闭。所以它在一个和另一个之间交替

我使用另一个v-for创建了一个元素来列出所有帖子，但创建了一个条件，只显示带有标题的相应帖子

我试图在现有条件的基础上创建一些其他条件，使用true if open，但不起作用。在这种情况下是否可以重用相同的元素

<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" name="tour-options-dropdown"
                v-model="selected" class="tour-options-dropdown"
                @change="showTour = selected">

            <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-for="(tour, key) in item.tours" v-if="showTour == tour.tourID" class="tour-suggestions">
        <div class="tour-list">
          <div class="tour-list-title">
             <p>{{ tour.title }}</p>
          </div>
          <div class="tour-list-description">
             <p>
                {{ tour.description }}
             </p>
          </div>
          <div class="tour-list-pics">
             <ul class="pics-list">
                <li v-for="image in tour.images">
                   <div class="pics-list-image-container"
                  v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }"
                  @click="openModal = true, showModal(image.image)"></div>
                </li>
             </ul>
          </div>
       </div>
       <div @click="showTour = false" class="close-suggestions">
          <span>X</span>
       </div>
    </div>

</div>

我记得当我使用angularjs时，使用过滤器很容易做到这一点。在这种情况下有类似的情况吗

<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" name="tour-options-dropdown"
                v-model="selected" class="tour-options-dropdown"
                @change="showTour = selected">

            <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-for="(tour, key) in item.tours" v-if="showTour == tour.tourID" class="tour-suggestions">
        <div class="tour-list">
          <div class="tour-list-title">
             <p>{{ tour.title }}</p>
          </div>
          <div class="tour-list-description">
             <p>
                {{ tour.description }}
             </p>
          </div>
          <div class="tour-list-pics">
             <ul class="pics-list">
                <li v-for="image in tour.images">
                   <div class="pics-list-image-container"
                  v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }"
                  @click="openModal = true, showModal(image.image)"></div>
                </li>
             </ul>
          </div>
       </div>
       <div @click="showTour = false" class="close-suggestions">
          <span>X</span>
       </div>
    </div>

</div>

新Vue{ el:“应用程序”， 资料{ 返回{ 选定：{}， toursObj:{}， 招待员：[{ id:0， 姓名：name0， lastname:lastname0， 旅游：[{ 巡回演出：巡回演出， 标题：title0_0， 描述：描述0\u 0， }, { 巡回演出：巡回演出1， 标题：标题0_1， 描述：描述0\u 1， }, { 巡回演出：巡回演出1， 标题：标题0_1， 描述：描述0\u 1， }, ], }, { id:1， 姓名：姓名1， 姓氏：姓氏1， 旅游：[{ 巡回演出：巡回演出1_0， 标题：标题1_0， 描述：描述1\u 0， }, { 巡回演出：巡回演出1， 标题：标题1_1， 描述：描述1_1， }, { 巡回演出：巡回演出1， 标题：标题1_1， 描述：描述1_1， }, ], }, ], } }, 模板：` {{item.name}{{item.lastname}} {{tour.title} {{toursObj[selected[item.id]].title}

{{toursObj[selected[item.id]].description}

X `, 创造{ 这是setToursObj； }, 方法：{ setToursObj{ const TOURS_OBJ={}； this.hosters.forEachhoster=>{ hoster.tours.forEachtour=>{ TOURS_OBJ[tour.tourID]=旅游； }; }; this.toursObj=TOURS\u OBJ； }, 近距离旅行{ 此.selected[id]=未定义； }, }, }

---

删除showTour的想法，它的独特性和切换对象上的东西，它自己的伟大的方法！这几乎是工作完成。它只会打开与用户帖子数量相同的帖子。别介意。我刚刚修复了模板。非常感谢你！是否可以在select中设置默认值？我尝试基于v型模型，但它不起作用。