我正在开发一个个人项目，我试图避免完整的 npm 构建过程，而是在单个 .html 中工作。使用 Vue 3 和 Vuetify 的文件。这是完整的 HTML(基本上您可以将其放入文件中，在浏览器中打开它，然后查看我所看到的内容):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9debe8f8e9f4fbe4ddaeb3a9b3ae" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.css">
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
"vuetify": "https://cdnjs.cloudflare.com/ajax/libs/vuetify/3.4.3/vuetify.esm.min.js"
}
}
</script>
</head>
<body>
<div id="app">
<v-table>
<thead>
<tr>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-for="d in numbers" :key="d">
<td>{{ d }}</td>
</tr>
</tbody>
</v-table>
</div>
<script type="module">
import { createApp, ref } from 'vue'
import { createVuetify } from 'vuetify'
const vuetify = createVuetify()
const app = createApp({
setup() {
const numbers = ref([4, 5, 6])
return { numbers }
}
})
app.use(vuetify).mount('#app')
</script>
</body>
</html>
我可以看到 Vue 启动了，我可以看到 Vuetify Assets 正在正确获取，但我在控制台中收到一个错误，我认为这意味着发生了一些不正常的事情:
[Vue warn]: Property "d" was accessed during render but is not defined on instance.
at <VTable>
at <App>
我的猜测是模板试图在setup()之前以某种方式呈现。脚本填充data ？我想做的事情可能吗？
另一件看起来很奇怪的事情是，当我不尝试使用数据而只是使用 v-table 创建一个简单的表时，例如。
<v-table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
</tr>
</tbody>
</v-table>
渲染的输出只是 <table> Col 1 Col 2 R1C1 R1C2 </table> ，但控制台中没有错误。值得注意的是，如果我从组合中删除 Vuetify 并仅使用常规表格标签，我的表格就会正确创建。似乎只有当 Vuetify 尝试渲染 v-table 时才会发生这种情况组件。
最佳答案
当你把Vue模板代码放入 <div id="app">直接，它会在 Vue 到达之前由浏览器处理。当在表格外部使用像 thead、tbody 等表格元素时，浏览器会将它们踢出，留下这样的结果:
<v-table>{{ d }}</v-table>
自 d来自v-for与 tr 一起删除，最终会出现警告和损坏的表。
有两种方法可以解决该问题，要么将模板代码移至 Vue 设置中，然后将应用程序挂载点留空:
<div id="app"></div>
和
<script type="module">
...
const app = createApp({
template: `
<v-table>
rest of the table code...
</v-table>
`,
setup() {
const numbers = ref([4, 5, 6])
return { numbers }
}
})
...
或者，您可以使用表格元素代替 v-table并让 Vue 稍后使用 is 替换它属性:
<div id="app">
<table is="vue:v-table">
rest of the table code...
</table>
</div>
不使用模板时还有其他问题，查看in-DOM Template Parsing Caveats section of the docs
关于javascript - 在单个 .html 页面中使用 vuetify，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/77567419/