vueの"Element is missing end tag"を解決したい
環境
macOS 14.4.1(sonoma)
Docker version 25.0.5
viteでvueを構築
解決したいこと
vueのtemplateで条件が一致する場合のみtrタグを出力させたいが「Element is missing end tag.」のエラーになる。
例）
16進数文字列を00からffまでの256個を格納してある配列があります。
これをvueのtemplateでtableタグの中で
v-forで回してtdタグで表示させます。
このとき16個ごとにtrタグで閉じて改行させたい場合、
以下のコードでエラーが出ます。
<template>
{{hexstrs}}
<div>
<table>
<tr>
<template v-for="(n, i) in hexstrs" :key="i">
<td>
<a>{{ i }}:{{ n }}</a>
</td>
<template v-if="((i + 1) % 16 === 0) && (i !== 0)">
</tr><tr>
</template>
</template>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
hexstrs: [],
};
},
created() {
this.hexstrs = Array.from({ length: 256 }, (_, index) =>
index.toString(16).padStart(2, "0")
);
},
};
</script>
発生している問題・エラー
[plugin:vite:vue] Element is missing end tag.
/vue/src/views/Test.vue:10:11
8 | <a>{{ i }}:{{ n }}</a>
9 | </td>
10 | <template v-if="((i + 1) % 16 === 0) && (i !== 0)">
| ^
11 | </tr><tr>
12 | </template>
at createCompilerError (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1329:17)
at emitError (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2822:5)
at Object.onclosetag (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2186:13)
at Tokenizer.stateInClosingTagName (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:749:16)
at Tokenizer.parse (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1107:16)
at Object.baseParse (/vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2861:13)
at Object.parse (/vue/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:703:23)
at Object.parse$2 [as parse] (/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1851:24)
at createDescriptor (file:///vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
at handleHotUpdate (file:///vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:2151:26
自分で試したこと
タグではなく文字列だとエラーになりません。
<template>
{{hexstrs}}
<div>
<table>
<tr>
<template v-for="(n, i) in hexstrs" :key="i">
<td>
<a>{{ i }}:{{ n }}</a>
</td>
<template v-if="((i + 1) % 16 === 0) && (i !== 0)">
●
</template>
</template>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
hexstrs: [],
};
},
created() {
this.hexstrs = Array.from({ length: 256 }, (_, index) =>
index.toString(16).padStart(2, "0")
);
},
};
</script>
vue(vite)ではこういった書き方はNGなのでしょうか？
0
