Значение NULL при проверке формы с помощью VueJS

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 в свой метод.

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

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

Если заметить, что у вас есть имя атрибута данных в качестве v-модели, почему бы не проверить атрибут данных напрямую?

Поскольку у вас есть входная привязка с v-моделью, я бы использовал это.

Например:

Шаблон:

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

Javascript:

data () {
    return {
        name: ''
    }
},
methods: {
    checkRequiredFields () {
        if(this.name == '') {
            alert("No value");
        }
   }
}

Это должно сработать для вас.