VueとBootstrapで良い感じの入力バリデーションを実装する

使い方

<div class="my-3">
    <button v-on:click="要素追加()">クリックで追加</button>
</div>
<div v-for="item in 追加コントロール" class="container mb-2">
    <div class="row">
        <div class="col-2 p-2 border bg-light fw-bold text-center">項目｛｛item.id｝｝</div>
        <div class="col-9 p-2">
            <!-- v-bind:classで入力チェックの結果を表示。メッセージが返って来たら問題有 -->
            <input type="text" class="w-100 form-control"
                   v-model="item.内容"
                   v-bind:class="{'is-invalid': 入力チェック(item.id), 'is-valid': !入力チェック(item.id)}">
            <!-- 以下の要素を消せば入力チェックのメッセージを消すことが可能。 -->
            <div class="invalid-feedback" v-text="入力チェック(item.id)"></div>
            <div class="valid-feedback">OK!</div>
        </div>
        <div class="col-1 p-2"><button v-on:click="要素削除(item.id)">削除</button></div>
    </div>
</div>
<p>NGコントロール数：｛｛エラーコントロール個数｝｝</p>

export default {
    name: "vue_basic1",
    components: {
    },
    data: function () {
        return {
            追加コントロール: {},
            追加コントロールカウント: 0,
            エラーコントロール個数: 0
        };
    },
    mounted: async function () {
    },
    methods: {
        要素追加: function () {
            this.追加コントロール[this.追加コントロールカウント] = { id: this.追加コントロールカウント, 内容: "" };
            this.追加コントロールカウント += 1;
            this.エラーコントロール個数確認();
        },
        要素削除: function (target) {
            delete this.追加コントロール[target];
            this.エラーコントロール個数確認();
        },
        入力チェック: function (target) {
            if (this.追加コントロール[target].内容 === "") {
                return "入力してください！"
            }

            if (this.追加コントロール[target].内容.indexOf("0") !== -1) {
                return "0を入力しないでください！";
            }
        },
        エラーコントロール個数確認: function () {
            // DOM更新後に実行する処理
            this.$nextTick(function () {
                this.エラーコントロール個数 = document.querySelectorAll(".is-invalid").length;
            });
        }
    }
}

参考