Блог

Главная - Вопросы по программированию - Vue, нажмите на ячейку таблицы с данными и покажите эти данные в модальном

Vue, нажмите на ячейку таблицы с данными и покажите эти данные в модальном

#javascript #vue.js

Вопрос:

У меня есть модальный компонент в моем компоненте vue, который хорошо работает, если я просто помещаю в него статический текст, поэтому я знаю, что он идеально функционален

Однако попытка передать данные из ячейки таблицы, по которой щелкают, в модальную, завершается неудачей и говорит, что name это не определено.

Что я делаю не так, пытаясь передать данные для каждой ячейки в этот модальный режим?

 <div id="app">
  <table>
  <tbody>
    <tr>
      <td v-for="name in names"  @click="showDetailModal = true"></td>
      <td>@{{ name }}</td>
    </tr>
  </tbody>
  </table>


  <div class="modal-vue">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" v-if="showDetailModal" @click="showDetailModal = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="showDetailModal">
      <button class="close" @click="showDetailModal = false">x</button>
      <h3>@{{ name.age }}</h3>
    </div>
  </div>
</div>


new Vue({
  el: "#app",
  props: { 

  },
  data: {
    showDetailModal: false,
    names: [
      {
        "name":"Amy",
        "age":37
      },
      {
        "name":"James",
        "age":39
      }
    ]
  }
})

Ответ №1:

Создайте другое свойство данных, которое называется currentItem , а затем назначьте ему элемент click при нажатии на строку таблицы :

 <div id="app">
  <table>
  <tbody>
    <tr>
      <td v-for="name in names"  @click="showModal(name )"></td>
      <td>@{{ name }}</td>
    </tr>
  </tbody>
  </table>


  <div class="modal-vue">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" v-if="showDetailModal" @click="showDetailModal = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="showDetailModal">
      <button class="close" @click="showDetailModal = false">x</button>
      <h3>@{{ currentItem.age }}</h3>
    </div>
  </div>
</div>


new Vue({
  el: "#app",
  props: { 

  },
  data: {
    showDetailModal: false,
    names: [
      {
        "name":"Amy",
        "age":37
      },
      {
        "name":"James",
        "age":39
      }
    ],
    currentItem:{name:'',age:''}
  },
methods:{
  showModal(item){
     this.showDetailModal = true;
     this.currentItem=item
  }

}
})

Комментарии:

1. Таким образом, функция вызывается правильно, потому что я могу распечатать консоль. однако войдите в функцию, модальный теперь больше не отображается. Я даже напечатал статус showDetailModal на консоли, и он показывает правильный статус, но модальный сейчас не отображается

2. пожалуйста, я допустил ошибку, это должно быть this.showDetailModal = true; вместо showDetailModal = true,

Ответ №2:

Причина, по name которой результат не определен, заключается в том, что он живет только внутри v-for цикла.

По этой причине при нажатии на таблицу вам необходимо сохранить, на какого пользователя был сделан щелчок. Таким образом, модал может отображать выбранного пользователя на основе этого значения.

Решение, предложенное Буссаджрой Брахим, отлично работает, однако, возможно, оно могло бы быть немного чище, удалив showDetailModal данные.

 
<div id="app">
  <table>
  <tbody>
    <tr>
      <td v-for="name in names"  @click="showModal(name )"></td>
      <td>@{{ name }}</td>
    </tr>
  </tbody>
  </table>


  <div class="modal-vue">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" v-if="currentItem" @click="currentItem = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="currentItem">
      <button class="close" @click="currentItem = false">x</button>
      <h3>@{{ currentItem.age }}</h3>
    </div>
  </div>
</div>


new Vue({
  el: "#app",
  props: { 

  },
  data: {
    names: [
      {
        "name":"Amy",
        "age":37
      },
      {
        "name":"James",
        "age":39
      }
    ],
    currentItem: false
  },
methods:{
  showModal(item){
     this.currentItem=item
  }

}
})
Метки: ,