VueJS jQuery: вычисленное значение атрибута родительских данных не определено

VueJS jQuery: вычисленное значение атрибута родительских данных не определено

08.03.2020 11:43:18 Просмотров 32 Источник

Я пытаюсь извлечь атрибут 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.

У вопроса есть решение - Посмотреть?

Ответы - VueJS jQuery: вычисленное значение атрибута родительских данных не определено / VueJS jQuery: computed value of parent data attribute undefined

Является ответом!
skirtle

09.03.2020 06:13:23

Вычисляемое свойство может иметь только одно кэшированное значение для каждого экземпляра Vue. В этом случае вы, похоже, пытаетесь вычислить значение, основанное на текущем элементе. Вычисляемое свойство не имеет такого контекста.

В общем случае вычисляемое свойство не должно пытаться получить доступ к DOM. DOM не реагирует и не запускает обновления свойств. Кроме того, DOM может не существовать в момент первой оценки свойства.

Я считаю, что в этом случае конкретная проблема заключается в том, что this будет экземпляром Vue, а не элементом DOM, поэтому $(this) ничего не будет соответствовать. Вы можете попробовать добавить некоторые консольные журналы в rowReportID для подтверждения.

Вместо использования вычисляемого свойства можно использовать метод. Чтобы получить доступ к узлу DOM, вам нужно будет получить его из объекта события native browser, который Vue предоставляет как $event:

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

с:

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

На самом деле здесь нет никакой необходимости использовать jQuery, вы можете сделать это с помощью собственных API DOM так же легко. jQuery обычно не требуется при использовании Vue.

Кроме того, если нет действительно веской причины, чтобы захватить этот атрибут из DOM, вы должны полностью избегать этой стадии. Вместо этого вы можете сделать что-то вроде этого:

@click="modalRequest(index, ind, value, modifiedRows[index].id)"
Закрыть X