Передача значений динамического объекта в модальное всплывающее окно в VUE, открывающее неверное значение идентификатора - PullRequest
Новая
       10

Передача значений динамического объекта в модальное всплывающее окно в VUE, открывающее неверное значение идентификатора

0 голосов
/ 15 января 2019

Я передаю значение динамического объекта в модальный шаблон Vue, но по какой-то причине переданный идентификатор всегда равен 1 + выбранный идентификатор, хотя мой console.log показывает правильный выбранный идентификатор. Это должно быть открытие контента для выбранного идентификатора. (Также моя модальная кнопка не закрывается.)

Моя ручка здесь: Вы можете видеть, что она всегда пытается открыть идентификатор + 1

https://codepen.io/omarel/pen/jXJVPw

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>

Ответы [ 2 ]

0 голосов
/ 15 января 2019

floorplans[id] получит floorplan на INDEX 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>
0 голосов
/ 15 января 2019

Вы используете индекс, а не идентификатор. floorplans[id] это просто индекс массива. Ваш номер id s от 1, но номер массива от нуля, поэтому floorplans[1] - это второй план этажа, чей id равен 2.

...