Проверка ввода текстового поля не работает в Vue JS

Question

Когда я нажимаю, чтобы добавить кнопку с пустым значением, пустое значение добавляется в список. Здесь я приложил скриншот. Мне нужна проверка для пустого значения. Мой код не работает.

Ошибка вывода: https://prnt.sc/pk0hvt

HTML:

<form
    id="listadding-wrap"
    @submit="checkForm"
    action="#"
    method="post"
>
    <input type="text" class="form-control" v-model="newName">
    <button class="addbtn" @click="addName">+</button>

    <ul class="teamlist">
        <li v-for="teamMember in teamMembers" v-text="teamMember"></li>
    </ul>
    <p v-if="errors.length">
        <b>Please enter the value to add</b>
        <ul>
            <li v-for="error in errors">{{ error }}</li>
        </ul>
    </p>
</form>

Vue JS:

var teammember = new Vue({

    el: '#listadding-wrap',
    data: {
        errors: [],
        newName:'',
        teamMembers: ['']
    },
    methods: { 
        checkForm: function (e) {
            if (this.newName) {
                return true;
            }
            this.errors = [];

            if (!this.newName) {
                this.errors.push('Name required.');
            }

            e.preventDefault();
        },

        addName() {
            this.teamMembers.push(this.newName);
            this.newName = '';
        }
    },

});

Answer 1

Вы добавили 2 обработчика событий, один в форму @submit, а другой в кнопку @ click

Здесь, в приведенном выше коде, нажатие кнопки сначала вызывает триггер, и форма отправляет

Я переехаллогика для отправки действия вместо двух отдельных событий

Вот рабочий код

Для кода: https://codepen.io/chansv/pen/RwwRgqd

<form
    id="listadding-wrap"
    @submit="checkForm"
    action="#"
    method="post"
>
    <input type="text" class="form-control" v-model="newName">
    <button class="addbtn">+</button>

    <ul class="teamlist">
        <li v-for="teamMember in teamMembers" v-text="teamMember"></li>
    </ul>
    <p v-if="errors.length">
        <b>Please enter the value to add</b>
        <ul>
            <li v-for="error in errors">{{ error }}</li>
        </ul>
    </p>
</form>

var teammember = new Vue({

    el: '#listadding-wrap',
    data: {
        errors: [],
        newName:'',
        teamMembers: [],
    },
    methods: { 
        checkForm: function (e) {
          console.log(e);
            this.errors = [];

            if (!this.newName) {
                this.errors.push('Name required.');
            } else {
              this.teamMembers.push(this.newName);
              this.newName = '';
            }


            e.preventDefault();
        }
    },

});