Нажатие кнопки без Vuetify не обновляет данные в v-data-table

Question

В кодовой ручке у меня две кнопки. Один Vuetify, а другой нет. оба должны вызывать функцию updateData(), но только компонент Vuetify может запустить ее успешно. Как я могу вызвать метод, определенный в компоненте, извне app div?

https://codepen.io/entropy283/pen/rNxMXGX?editors=1010

Answer 1

Вы пытаетесь запустить метод updateData, который доступен только внутри элемента HTML, на котором установлен Vue. Я предполагаю, что вы устанавливаете Vue на элемент с помощью id="app".

Вы должны поместить кнопку внутри <div id="app">:

<div id="app">
  <button @click="updateData()">Button</button>
  ...

Или, если вы этого не сделаете необходимо получить доступ к любым свойствам Vue, вы можете просто создать функцию внутри script и запустить ее с событием onclick. Имейте в виду, что @click также недоступен за пределами Vue:

<button onclick="updateData()">Button</button>

<div id="app">
  ...

<script>
function updateData() {
  console.log('test')
}
</script>