Question

我有一个充满位置的阵列。有2个div，一个div包含位置，另一个在CLICKED位置显示更多信息。

当我点击位置（例如苏格兰）而不是列出＆＃34; moreinfo＆＃34;苏格兰的信息和仅苏格兰的信息，它列出了所有3＆＃34; moreinfo＆＃34;标签。我该如何解决这个问题？

HTML：

           <div id="test">
<div id="location-section">
    <div class="main-container">
        <div class="location-grid-container">
            <div id="info-box" class="outline">
            <p v-for="location in locations" v-if="moreinfo">{{location.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>

vue.js

const app = new Vue({
    el: '#test',
    data: {
        moreinfo: false,
        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) {
        if(!this.selected) {
          this.moreinfo = true;
      } else {
        this.moreinfo=false;
      }
                    },
    }
})

Answer 1

这是因为您要渲染moreinfo标记中所有位置的所有<p>。您可以做的是实际声明一个新的数据条目，比如locationMoreInfo，并在点击事件上覆盖它。

您的标记看起来像这样：

<p v-if="locationMoreInfo" v-html="locationMoreInfo"></p>

在您的VueJS逻辑中，请记住在locationMoreInfo: null对象中声明data。每当调用click处理程序时，您只需更新它：

moreinfo2(location) {
  if (!this.selected) {
    this.locationMoreInfo = location.moreinfo;
  } else {
    this.locationMoreInfo = null;
  }
}

见下面的概念验证：

＆＃13;

const app = new Vue({
  el: '#test',
  data: {
    moreinfo: false,
    locationMoreInfo: null,
    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) {
      if (!this.selected) {
       this.locationMoreInfo = location.moreinfo;
      } else {
        this.locationMoreInfo = null;
      }
    },
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="test">
  <div id="location-section">
    <div class="main-container">
      <div class="location-grid-container">
        <div id="info-box" class="outline">
          <p v-if="locationMoreInfo" v-html="locationMoreInfo"></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>

＆＃13;

Answer 2

这里不需要使用两个标志 - 一个用于＆＃39; moreInfo＆＃39;另一个用于＆＃39;选择＆＃39;。仅使用一个，并在选择位置时进行设置：

＆＃13;

const app = new Vue({
    el: '#test',
    data: {
        selectedLocation: null,
        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: "Europe MoreInfo"
            },
            {
                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: "America MoreInfo"
            },
            {
                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: "Scotland MoreInfo"
            },
        ],
    },
    methods:{ 
        moreinfo2(location) {
          this.selectedLocation = location;
        },
    }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="test">
  <div id="location-section">
    <div class="main-container">
      <div class="location-grid-container">
        <div id="info-box" class="outline">
          <p v-for="location in locations" v-if="location === selectedLocation">{{location.moreinfo}}</p>
        </div>
        <div id="location-box">
          <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>

＆＃13;

Answer 3

您拥有数据阵列，因此您无法仅通过true / false数据进行控制！另外，我建议您在:key中使用v-for。下面我将loop key作为参数传递，并在selected数据中控制该参数以显示信息文字......

＆＃13;

const app = new Vue({
    el: '#test',
    data: {
        selected: null,
        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"
            },

        ],
    },
    methods:{ 
      moreinfo2(key) {
       this.selected = key
      }
    }
})

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="test">
<div id="location-section">
    <div class="main-container">
        <div class="location-grid-container">
            <div id="info-box" class="outline">
            <p v-for="(location,key) in locations" :key="key" v-if="selected == key">{{location.moreinfo}}</p>
            </div>
 <div id="location-box"><!-- Root element for your Vue app -->
        <div v-for="(location,key) in locations" :key="key" 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(key)">
          <h4>{{location.name}}</h4>
          <p>{{location.desc}}</p>
        </div>
      </div>
    </div>
</div>
    </div>

    </div>

＆＃13;

v-for和v-if列出所有数组onclick，应该在单击的唯一数组上列出信息

3 个答案: