VueJS jQuery: вычисленное значение родительского атрибута данных не определено - PullRequest
Новая
       23

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

4 голосов
/ 08 марта 2020

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

1 Ответ

2 голосов
/ 09 марта 2020

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

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

Я полагаю, что в этом случае конкретная проблема c заключается в том, что 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)"
...