Question

我正在尝试进行一些表单验证，但每次都会遇到相同的错误。

Uncaught TypeError: Cannot read property 'value' of null

这是html输入

<label>Name of person</label>
<input v-model="model.cl_name" type="text" id="name"/>

简单的JS代码是：

data () {
    return {
        model.cl_name: ''  // should it be like that? 
    }                      // because it's not a legit syntax and gives 
                           // error
},
methods: {
    checkRequiredFields () {
        if(this.model.cl_name == '') {  //should it be like that?
            alert("No value");
        }
   }
}

然而，我无法让它发挥作用......

更新评论。

Answer 1

好的，你现在已经彻底改变了你的问题。

以下是您更新的问题的答案：

您需要像下面这样设置数据属性：

data () {
    return {
        model: {
            cl_name: ''
        }
    }
},

Answer 2

这看起来像是一个范围错误。尝试将名称var放在方法中。

resource_group_name

另一方面，看到您将数据属性名称作为v模型，为什么不直接检查数据属性？

由于您有与v-model的输入绑定，我会使用它。

例如：

模板：

methods: {
    checkRequiredFields () {
        var name = document.getElementById("name");

        if (name.value == "") {
            alert("No value");
        }
   }
}

使用Javascript：

<label>Name of person</label>
<input v-model="name" type="text" id="name"/>

那应该适合你。

使用VueJS进行表单验证时null的值

2 个答案: