VueJS jQuery: 상위 데이터 특성의 계산된 값이 정의되지 않았습니다.

VueJS jQuery: 상위 데이터 특성의 계산된 값이 정의되지 않았습니다.

난 지금 이 모든 걸려고 노력중이야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>

VueJ - 계산

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

사용자가 클릭하면 콘솔이 '정의되지 않음'으로 보고됩니다.DOM이 올바르게 렌더링합니다.data-reportid올바른 값이 포함되어 있기 때문에 계수가 되지 않습니다.

내가 뭘 놓쳤지?부디 인내심을 가지렴.대부분 PHP 배경입니다.

계산된 속성은 Vue 인스턴스당 하나의 캐시된 값만 가질 수 있습니다.이 경우 현재 요소를 기반으로 값을 계산하려고 하는 것 같습니다.계산된 속성에 해당 컨텍스트가 없습니다.

일반적으로 계산된 속성이 DOM에 액세스하려고 하면 안 됩니다.DOM은 반응하지 않으며 속성 업데이트를 트리거하지 않습니다.또, DOM은, 그 특성이 최초로 평가되는 지점에 존재하지 않는 경우가 있습니다.

이 경우 구체적인 문제는 다음과 같은 문제가 있다고 생각합니다.thisDOM 요소가 아닌 Vue 인스턴스가 되기 때문에$(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)"

언급URL : https://stackoverflow.com/questions/60591886/vuejs-jquery-computed-value-of-parent-data-attribute-undefined