jquery - VueJS jQuery : computed value of parent data attribute undefined

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 不是 react 性的，不会触发属性更新。此外，在首次评估属性时，DOM 可能不存在。

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

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

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

与:

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

这里实际上没有必要使用 jQuery，您可以使用 native DOM API 轻松完成此操作。使用 Vue 时通常不需要 jQuery。

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

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