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');
},

当用户单击时，控制台报告 'undefined' 作为结果。 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 轻松实现。 jQuery 使用 Vue 时通常不需要。

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

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

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

VueJS jQuery: computed value of parent data attribute undefined

jquery

custom-data-attribute

vue.js

vuejs2