Vue点击表格单元格传数据到模态框提示name未定义如何解决

问题错误点 #

• 变量作用域不匹配：v-for声明的name仅在循环所在的标签内部有效，模态框不在循环结构范围内，无法直接访问name变量，这就是控制台报name未定义的直接原因。
• 表格结构错误：你把v-for绑定在了第一个<td>上，导致第二个显示名称的<td>不在循环范围内，表格本身渲染结果就不符合预期。
• 没有存储选中的条目：点击单元格时仅修改了模态框的显示状态，没有把当前点击的条目数据存储到全局可访问的变量中，模态框自然无法获取对应数据。

修改后可运行代码 #

模板部分

<div id="app">
  <table>
  <tbody>
    <!-- 将v-for移到tr上循环整行，绑定key保证复用正确 -->
    <tr v-for="item in names" :key="item.name">
      <!-- 点击时触发方法，传入当前循环的条目 -->
      <td @click="openModal(item)">{{ item.name }}</td>
    </tr>
  </tbody>
  </table>

  <div class="modal-vue">
    <div class="overlay" v-if="showDetailModal" @click="showDetailModal = false"></div>
    <div class="modal" v-if="showDetailModal">
      <button class="close" @click="showDetailModal = false">x</button>
      <!-- 读取存储的选中条目的age字段 -->
      <h3>{{ currentSelected.age }}</h3>
    </div>
  </div>
</div>

Vue实例部分

new Vue({
  el: "#app",
  data: {
    showDetailModal: false,
    // 新增变量存储当前选中的条目
    currentSelected: {},
    names: [
      {
        "name":"Amy",
        "age":37
      },
      {
        "name":"James",
        "age":39
      }
    ]
  },
  methods: {
    openModal(item) {
      // 先存选中的条目，再打开模态框
      this.currentSelected = item
      this.showDetailModal = true
    }
  }
})

如果你是和后端模板（比如Laravel Blade）混用，需要保留@在插值表达式前，改为@{{ item.name }}、@{{ currentSelected.age }}即可。

内容的提问来源于stack exchange，提问作者Geoff_S