Vue中v-for与v-if结合点击仅展示选中项详情的问题修复

我明白你的困扰——点击单个地点却跳出所有地点的详细信息，这是因为你当前的逻辑用了一个全局开关来控制显示，没有区分“选中的是哪一个地点”。咱们一步步来修复：

问题根源分析 #

你现在用moreinfo这个布尔值来控制详情显示，一旦它变成true，<p v-for="location in locations" v-if="moreinfo">就会遍历所有地点并渲染它们的moreinfo。而且你的moreinfo2方法只是在切换这个全局开关，根本没记录用户选中的具体地点，自然会显示全部内容。

修复方案 #

我们可以直接利用你已经声明的selected变量来跟踪选中的地点，不需要额外的moreinfo开关：

1. 调整Vue实例的方法和逻辑 #

修改moreinfo2方法，让它记录选中的地点，同时支持点击同一地点时隐藏详情：

const app = new Vue({
  el: '#test',
  data: {
    // 移除不再需要的moreinfo变量
    locations: [
      { 
        name: "Europe", 
        desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.", 
        img: "img/europe.jpg", 
        moreinfo: "adassaad" 
      },
      { 
        name: "America", 
        desc: "Curabitur vel lacus ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ex ante, scelerisque vitae semper ut", 
        img: "https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg", 
        moreinfo: "adasdasdassaad" 
      },
      { 
        name: "Scotland", 
        desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.", 
        img: "https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg", 
        moreinfo: "adad" 
      },
    ],
    selected: null,
  },
  methods:{
    moreinfo2(location) {
      // 如果点击的是已选中的地点，就清空选中状态；否则设置为当前地点
      this.selected = this.selected === location ? null : location;
    },
  }
})

2. 修改HTML的详情展示部分 #

把遍历所有地点的逻辑改成只显示选中地点的详情，用selected来控制显示与否：

<div id="test">
  <div id="location-section">
    <div class="main-container">
      <div class="location-grid-container">
        <div id="info-box" class="outline" v-if="selected">
          <!-- 直接显示选中地点的moreinfo，不需要v-for -->
          <p>{{selected.moreinfo}}</p>
        </div>
        <div id="location-box">
          <!-- Root element for your Vue app -->
          <div 
            v-for="location in locations" 
            class="location-box" 
            v-bind:style="{ background: 'linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) ),url(' + location.img + ')' }" 
            @click="moreinfo2(location)"
          >
            <h4>{{location.name}}</h4>
            <p>{{location.desc}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

修复后的逻辑说明 #

• 点击任意地点时，该地点对象会被赋值给selected，此时info-box因为v-if="selected"会显示，并且只渲染选中地点的moreinfo。
• 如果再次点击同一个地点，this.selected === location为true，会把selected设为null，info-box就会隐藏。
• 点击其他地点时，会替换selected的值，显示新地点的详情。

这样就完美解决了点击单个地点却显示全部详情的问题啦！

内容的提问来源于stack exchange，提问作者Donnie Berry