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

Question

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

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))"

与：

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

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

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

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