单击非 Vuetify 按钮不会更新 v-data-table 中的数据

【问题标题】：Clicking non Vuetify button does not update data in v-data-table单击非 Vuetify 按钮不会更新 v-data-table 中的数据
【发布时间】：2020-10-07 09:13:38
【问题描述】：

在代码笔中，我有两个按钮。一个是 Vuetify，另一个不是。两者都应该调用 updateData() 函数，但只有 Vuetify 组件能够成功运行它。如何从app div 之外调用组件中定义的方法？

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

【问题讨论】：

您不想将按钮放在 app-div 中并使用 @click 的任何具体原因？
我正在尝试迁移旧应用程序，我宁愿分步进行，而不是只更改所有内容。我知道这是一个非常奇怪的问题，哈哈抱歉。

标签： vue.js vuetify.js v-data-table

【解决方案1】：

您正在尝试触发updateData 方法，该方法只能在安装了 Vue 的 HTML 元素内访问。我假设您正在使用 id="app" 将 Vue 安装到元素。

你必须把按钮放在<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>

【讨论】：