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

问题描述

我将动态对象值传递给 Vue 模态模板，但由于某种原因，传递的 ID 始终为 1 + 所选 ID，即使我的 console.log 显示选择了正确的 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;▾&lt;/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>

标签： vue.jsvuejs2vue-component

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

问题描述

解决方案

推荐阅读