[vue.js]v-forで、特定の回数の時に特定の要素(<br>)を追加したが、タグに囲まれてしまい見た目上の反映がされない

前提・実現したいこと

現在vue.jsで単位ファイルコンポーネントを用いて開発を行っています。
リストレンダリングである v-for を用いて、特定の回数の時に要素(<br>)を追加したいですがうまく反映されず困っています
(<br>自体がタグに囲まれてしまい、意図した改行にならない)

単一ファイルコンポネントの中では、ボタンをv-forを用いて繰り返しています

実現したいことは以下の通りです
v-forの中で親コンポーネントから受け取った数値に該当する回数の倍数を迎えたときに、改行することです
ここでは2を受け取ったとします。その時は最終的に以下のように出力されます

<label><input type="checkbox"></label>
<labe><input type="checkbox"></label>
<br>
<labe><input type="checkbox"></label>
<label><input type="checkbox"></label>
<br>
<labe><input type="checkbox"></label>
<label><input type="checkbox"></label>
<br>
.
.
.

ボタンが2個おきに改行されています

該当のソースコード

ここでは<label>に囲まれたチェックボックスを単一ファイルコンポーネントとしています
最終的に、チェックボックスや改行の描写はできるのですが、改行が<span>タグ自体に囲まれてしまい、結果として改行されていない状態で画面に表示されてしまいます。

どのようにすれば、チェックボックスを意図した位置で改行して表示できるのでしょうか
ただし、チェックボックス自体は必ず単一ファイルコンポーネントに書かれるものとしてほしいです

[checkbox.vue]

<template>
    <fieldset>
        <span v-for="(item,index) in this.items" :key="item.id">
            <label>
                <input type="checkbox" name="mycheckbox">
                {{item.label}}
            <label>
            <br v-if((index+1)%maxNumOneLine==0)>
        </span>
    </fieldset>
</template>
<script>
(略)
    name: 'myCheckbox',
    props:{
        maxNumOneLine:{type:Number}
    }
(略)
</script>
<style scoped>
(略)
<style>

このコンポーネントを利用する親コンポーネントは以下の通りです
[app.vue]

<template>
    <myCheckbox
        :items="checkboxList"
        :maxNumOneLine="2"
    >
    <myCheckbox>
</template>
<script>
    import myCheckbox from './checkbox.vue'
    export default{
        name: 'LemonullContentPlatform',
        data(){
            return{
                checkboxList:[
                    {id:1,label:"チェック1"}
                   ,{id:2,label:"チェック2"}
                   ,{id:3,label:"チェック3"}
                   ,{id:4,label:"チェック4"}
                   ,{id:5,label:"チェック5"}
                   ,{id:6,label:"チェック6"}
                ]
            }
        },
        components: {
            checkbox
        }
    }

</script>
<style scoped>
(略)
<style>

よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

要素を二つずつ配列にして、v-forをネストする方法がとりあえずは思いつきます。
また、その時にbrタグをlabelタグと同階層にするためにtemplateタグを使ってv-forを回してあげる必要があるかと思います。リストレンダリングで複数の要素を対象に取る

js
1[
2  [{id:1,label:"チェック1"},{id:2,label:"チェック2"}],
3  [{id:3,label:"チェック3"},{id:4,label:"チェック4"}],
4  [{id:5,label:"チェック5"},{id:6,label:"チェック6"}]
5]

html
1<template v-for="(array, index) in this.items" :key="index"></template>
2  <label v-for="(item, key) in array" :key="key">
3    <input type="checkbox" name="mycheckbox">{{item.label}}
4  <label>
5  <br />
6</template>
7

動作の確認はしてないので参考までに

投稿2020/09/27 15:20

zushi0905

総合スコア683

llemon

2020/09/27 15:50

ご回答ありがとうございます。なるほど。その方法は思いつきませんでした。ちなみにですが正直なところ、見た目上改行されていればよいので<br>タグでなくとも、頂いた<template>の一つ下の階層を<label>タグではなく<div>タグなどで囲んでしまうのもよいかと思いました。素晴らしいヒントをありがとうございます。