英文:
Tablerow with Vue3 Composition API without Vue.cli not working
问题
问题与此问题相似：https://stackoverflow.com/questions/38760742/vue-js-table-component-not-working。
不同之处在于，我使用Vue3，使用组合式 API，不使用Vue.cli，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table>
<my-tr v-for="(char, i) in chars" :key="i" :char="char" />
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2"></script>
<script>
const myTr = Vue.defineComponent({
props: ['char'],
template: '<tr><td>{{char}}</td></tr>'
});
Vue.createApp({
setup() {
return {
chars: Vue.ref(['a', 'b', 'c'])
};
}
}).component('my-tr', myTr).mount('#app');
</script>
</body>
</html>
表格没有正确渲染，但不会在控制台中引发错误：
<div id="app" data-v-app="">
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
<table></table>
</div>
将<table>替换为<div>可以解决此问题，但对我来说替换表格不是一个选项。
我做错了什么？
英文:
My problem is similar to this question: https://stackoverflow.com/questions/38760742/vue-js-table-component-not-working.
The difference is that I use Vue3, with the Composition API and without Vue.cli as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table>
<my-tr v-for="(char, i) in chars" :key="i" :char="char" />
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2"></script>
<script>
const myTr = Vue.defineComponent({
props: ['char'],
template: '<tr><td>{{char}}</td></tr>'
});
Vue.createApp({
setup() {
return {
chars: Vue.ref(['a', 'b', 'c'])
};
}
}).component('my-tr', myTr).mount('#app');
</script>
</body>
</html>
The table is not rendered correctly - without causing an error on the console:
<div id="app" data-v-app="">
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
<table></table>
</div>
Replacing <table> with <div> fixed it - but replacing the table is not an option for me.
What am I doing wrong?
答案1
得分: 1
以下是翻译好的部分：
You are running into a restriction of HTML, where <table> allows only for specific tags as children (tr, thead, tbody, tfoot). This applies to your custom <my-tr> tag. The documentation recommends to use :is as a workaround:
<tr is="vue:my-tr" v-for="(char, i) in chars" :key="i" :char="char"></tr>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const myTr = Vue.defineComponent({
props: ['char'],
template: '<tr><td>{{char}}</td></tr>'
});
Vue.createApp({
setup() {
return {
chars: Vue.ref(['a', 'b', 'c'])
};
}
}).component('my-tr', myTr).mount('#app');
<!-- language: lang-css -->
table{
border: 1px solid grey;
}
<!-- language: lang-html -->
<div id="app">
<table>
<tr is="vue:my-tr" v-for="(char, i) in chars" :key="i" :char="char"></tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2"></script>
<!-- end snippet -->
英文:
You are running into a restriction of HTML, where <table> allows only for specific tags as children (tr, thead, tbody, tfoot). This applies to your custom <my-tr> tag. The documentation recommends to use :is as a workaround:
<tr is="vue:my-tr" v-for="(char, i) in chars" :key="i" :char="char"></tr>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const myTr = Vue.defineComponent({
props: ['char'],
template: '<tr><td>{{char}}</td></tr>'
});
Vue.createApp({
setup() {
return {
chars: Vue.ref(['a', 'b', 'c'])
};
}
}).component('my-tr', myTr).mount('#app');
<!-- language: lang-css -->
table{
border: 1px solid grey;
}
<!-- language: lang-html -->
<div id="app">
<table>
<tr is="vue:my-tr" v-for="(char, i) in chars" :key="i" :char="char"></tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论