gpt4 book ai didi

vue.js - vue单文件组件报错模板元素未找到或为空

转载 作者:行者123 更新时间:2023-12-04 04:21:17 25 4
gpt4 key购买 nike

我有一个非常简单的单文件组件,在 checkbox-wrapper.vue 中定义:

<template id="checkbox-wrapper">
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>
</template>
<script>
export default {
data() {
return {
checked: false,
title: "Check me"
};
},
methods: {
check() {
this.checked = !this.checked;
}
}
};
</script>

我已经成功地使用 webpack 将此组件构建为 checkbox-wrapper.js。

这是 app1.js:

Vue.component('checkbox-wrapper',{
template: "#checkbox-wrapper"
});



var app1 = new Vue({
el: "#app1",
data: {},
methods: {}
});

还有 index.html,我试图在其中显示此组件:

<!DOCTYPE html>
<html>
<head>
<title>Empty project</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="checkbox-wrapper.js"></script>
</head>
<body>
<div id="app1">
<checkbox-wrapper></checkbox-wrapper>
</div>

<script src="app1.js"></script>
</body>
</html>

我收到错误:

[Vue warn]: Cannot find element: #checkbox-wrapper

[Vue warn]: Template element not found or is empty: #checkbox-wrapper

[Vue warn]: Failed to mount component: template or render function not defined.

我不明白我做错了什么 - 在 vue 初始化之前包含并注册了组件。我听从了 here 的建议,但它对我不起作用。

最佳答案

我觉得你的方法很奇怪。

I was following advice from here

但是你是通过webpack设置的,跟他不一样,他用的是cdn approach ,他将 vue 组件直接挂载到一个 HTML 元素上,该元素的 id 在实际 HTML 页面中(不仅仅是 vue 模板的 id)。这是通常用于小型测试项目的方法,顺便说一句,那些不关心性能的项目。

关于设置项目,如果不是真的需要,就用vue-cli而不是自己配置 webpack。 The instructuion非常棒,所以我相信您会轻松实现它。

关于vue.js - vue单文件组件报错模板元素未找到或为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59241689/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com