Javascript 输入文本框验证在Vue js中不起作用

当我单击添加带有空值的按钮时，会在列表中添加空值。这里我附上了一个截图。我需要验证一个空值。我的代码不起作用

错误输出：

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>

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 = '';
        }
    },

});

---

您添加了两个事件处理程序，一个位于表单@submit，另一个位于按钮@click

在上面的代码中，按钮单击首先触发表单提交

我已将逻辑移到提交操作，而不是两个单独的事件

这是工作代码

对于代码笔：

+




请输入要添加的值

{{error}


var teammember=新的Vue({
el:“#列表添加包装”，
数据：{
错误：[]，
新名称：“”，
团队成员：[]，
},
方法：{
检查表：功能（e）{
控制台日志（e）；
this.errors=[]；
如果（！this.newName）{
this.errors.push（'Name required'）；
}否则{
this.teamMembers.push（this.newName）；
this.newName=''；
}
e、 预防默认值（）；
}
},
});

<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();
        }
    },

});