Question

我正在将动态对象值传递到Vue模态模板中，但是由于某些原因，即使我的console.log显示了正确的ID，传递的ID始终是1 +所选ID。它应该是所选ID的打开内容。（我的模式按钮也没有关闭。）

我的笔在这里：您可以看到它总是尝试打开id + 1

VUE

 // global component
    Vue.component('popup',{
      template: '#popup',
      props: ["floorplan"]
    })

    //VUE connection
      var floorplans = new Vue({
        el:"#floorplans",
        data: {
          popup: false,
          id: 1,
          floorplans: [
            {
              "id": 1,
              "building": "214",
              "residence": "106",
              "classname": "studio",
              "bed": 0,
              "bath": 1,
              "den": 0,
              "price": "$x,xxx",
              "img": "floorplans/images/x.png",
              "pdf": "floorplans/pdfs/x.pdf"
            },
            {
              "id": 2,
              "building": "214",
              "residence": "109",
              "classname": "1bed",
              "bed": 1,
              "bath": 1,
              "den": 0,
              "price": "$x,xxx",
              "img": "floorplans/images/x.png",
              "pdf": "floorplans/pdfs/x.pdf"
            },
            {
              "id": 3,
              "building": "214",
              "residence": "208",
              "classname": "1bed",
              "bed": 1,
              "bath": 1,
              "den": 0,
              "price": "$x,xxx",
              "img": "floorplans/images/x.png",
              "pdf": "floorplans/pdfs/x.pdf"
            },
            {
              "id": 4,
              "building": "214",
              "residence": "205",
              "classname": "1bed",
              "bed": 1,
              "bath": 1,
              "den": 1,
              "price": "$x,xxx",
              "img": "floorplans/images/x.png",
              "pdf": "floorplans/pdfs/x.pdf"
            },
            {
              "id": 5,
              "building": "210",
              "residence": "303",
              "classname": "2bed",
              "bed": 2,
              "bath": 2,
              "den": 0,
              "price": "$x,xxx",
              "img": "floorplans/images/x.png",
              "pdf": "floorplans/pdfs/x.pdf"
            }
          ]
        },
        methods: {
          // opennfloorplan: function(event) {
          //   console.log(event.id);
          // }
          pop: function(id){
            console.log(id);
            this.id = id;
            console.log(this.id);
            this.popup = true;
          }
        }
      })

HTML

<section id="floorplans" class="table">
  <table v-cloak class="sortable">
      <thead>
        <tr>
          <th scope="col" class="sorttable_sorted">Residence<span id="sorttable_sortfwdind">&nbsp;▾</span></th>
          <th scope="col">Bed/Bath</th> 
          <th scope="col">Building</th>
          <th scope="col">Price</th>
          <th scope="col"></th>
        </tr>
      </thead>


      <tbody>

        <tr v-for="floorplan in floorplans" v-bind:class="floorplan.classname">
          <td data-label="Residence">{{ floorplan.residence }}</td>
          <td data-label="Bed/Bath">
            <span v-if="floorplan.bed"> {{floorplan.bed}} BEDROOM </span> 
            <span v-else="floorplan.bed"> STUDIO </span> 
            <span v-if="floorplan.den"> + {{floorplan.den}} DEN </span> 
            <span v-if="floorplan.bath"> / {{floorplan.bath}} BATH</span> 
          </td>
          <td data-label="Building">{{ floorplan.building }}</td>
          <td data-label="Price">{{ floorplan.price }}</td>
          <td data-label="Floor Plan">
            {{ floorplan.id }}
            <a v-on:click="pop(floorplan.id)" href="javascript:;" class="btn view white openfloorplan">View</a>
            <a v-bind:href="floorplan.pdf" target="_blank" class="btn apply blue">Apply</a>
          </td>
        </tr>
      </tbody>
    </table>

    <popup v-if="popup" :floorplan="floorplans[id]"></popup>
</section>



<template id="popup">
  <transition name="popup">
    <div class="popup">
      <div class="content"><img width="200" height="106" />
        <p>{{ floorplan.id }}</p>
        <p>{{ floorplan.residence }}</p>
        <button v-on:click="floorplans.$data.popup = false">button</button>
      </div>
    </div>
  </transition>
</template>

Answer 1

您正在使用索引，而不是ID。 floorplans[id]只是一个数组索引。您的id的数字从1开始，而数组的数字从零开始，因此floorplans[1]是第二个平面图，其id为2。

Answer 2

floorplans[id]将在INDEX floorplan处获得id。您的平面图ID从1开始，数组索引从0开始。

<tr v-for="(floorplan, index) in floorplans" v-bind:class="floorplan.classname">

<a v-on:click="pop(index)" href="javascript:;" class="btn view white openfloorplan">View</a>

在VUE中将动态对象值传递给Modal Popup，打开错误的ID值

2 个答案: