VueJS jQuery：父数据属性的计算值未定义

Question

当用户单击data-reportid时，我试图从父级<tr>中提取<td>属性。

HTML

<tr :data-reportid="modifiedRows[index]['id']" v-for="(row,index) in modifiedRows" :key="index">
  <td v-html="value" v-for="(value, ind) in row" @click="modalRequest(index, ind, value, rowReportID)" :key="ind">
    {{ row[ind] }}    <---- i know i can just use 'value', i was experimenting.
  </td>
</tr>

VueJS-计算所得

rowReportID() {
  return $(this).parent().data('reportid');
},

[当用户单击时，控制台将报告“未定义”作为结果。 DOM正确呈现data-reportid属性，并且包含正确的值，因此这不是一个因素。

我在这里想念什么？请耐心等待。主要是PHP背景。

Answer 1

每个Vue实例的计算属性只能具有单个缓存的值。在这种情况下，您似乎正在尝试根据当前元素计算一个值。计算的属性没有该上下文。

通常，计算属性不应尝试访问DOM。 DOM不是被动的，不会触发属性更新。此外，在第一次评估属性时，DOM可能不存在。

我相信在这种情况下，特定的问题是this将是Vue实例，而不是DOM元素，因此$(this)将不匹配任何内容。您可以尝试在rowReportID中添加一些控制台日志以确认。

代替使用计算属性，可以使用方法。要访问DOM节点，您需要从本机浏览器事件对象获取它，Vue将其公开为$event：

@click="modalRequest(index, ind, value, rowReportID($event))"

with：

methods: {
  rowReportID(event) {
    return $(event.target).parent().data('reportid');
  }
}

这里实际上并不需要使用jQuery，您可以使用本机DOM API轻松地做到这一点。使用Vue时通常不需要jQuery。

此外，除非有充分的理由从DOM中获取此属性，否则应该完全避免该阶段。相反，您可以执行以下操作：

@click="modalRequest(index, ind, value, modifiedRows[index].id)"