Показ div исходя из ответа сервера используя

Question

Стоит задача проверить поля регистрации на пустоту на стороне сервера и выводить сообщения над пустым полем с помощью axios и vue.js. Для этого я создал div над каждым полем ввода и прописал ответы от сервера о том какое из полей пустое, но так и не понял как обработать их на клиенте,чтобы выводить эти сообщения.

  
new Vue({
  el: '#vue',
  data() {
    return {
      Fullname: '',
      mail: '',
      password: '',
      number: '',
      answer: false
    }
  },
  methods: {

    check() {
      axios.post('main2.php', {
        name: this.Fullname,
        mail: this.mail,
        password: this.password,
        number: this.number
      })
         .then(function (response) {
          console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    }
  }
})

.reg_form {
    margin: auto;
    width: 100%;
    height: auto;
    border: 1px solid #4CAF50;
}

.warning {
    width: 290px;
    height: auto;
    color: white;
    background-color: red;
    font-size: 20px;
    margin: 10px auto;
}

.success {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    line-height: 100px;
    margin: auto;
}

.device_type {
    margin: auto;
    width: 100%;
    height: 100%;
  background-color: green;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 200px;
    border: solid 1px #4CAF50;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px auto;
    display: flex;
}

body {
    margin:0;
}

input {
    margin: 10px auto;
    display: flex;
    padding: 15px 32px;
    font-size: 16px;
    border: 2px solid #4CAF50;
    border-radius: 4px;
}

@media screen and (max-width: 600px) {
    .device_type {
        width: 350px;
    border-radius: 30px;
    }

    .reg_form {
        width: 350px;
    }

    body {
        background-color: #4CAF65;
    }

    .button {
        border-radius: 5px;
        background-color: green;
    }

    input {
    margin: 10px auto;
    display: flex;
    padding: 15px 32px;
    font-size: 16px;
    border: 2px solid #4CAF50;
    border-radius: 4px;
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Регистрация</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="device_type"></div> 
    <div id="vue" class="reg_form">
        <div v-if="answer === 'null_name'" class="warning">Поле обязательно для заполнения</div>
        <input placeholder="Фамилия Имя Отчество" class="name" type="text" name="" v-model="Fullname">
        <div v-if="answer === 'null_mail'" class="warning">Поле обязательно для заполнения</div>
        <input placeholder="Почта" class="mail" type="text" name="" v-model="mail">
        <div v-if="answer === 'null_password'" class="warning">Поле обязательно для заполнения</div>
        <input placeholder="Пароль" class="password" type="text" name="" v-model="password">
        <div v-if="answer === 'null_number'" class="warning">Поле обязательно для заполнения</div>
        <input placeholder="Телефон" class="number" type="text" name="" v-model="number">
        <button v-on:click="check" class="button">Регистрация</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

PhP код сервера

$_POST = json_decode(file_get_contents('php://input'), true);
// Обработка запроса
$null_name = $_POST['name'];
$null_mail = $_POST['mail'];
$null_password = $_POST['password'];
$null_number = $_POST['number'];
if ($null_name=="") {
echo json_encode('null_name');
}
if ($null_mail=="") {
echo json_encode('null_mail');
}
if ($null_password=="") {
echo json_encode('null_password');
}
if ($null_number=="") {
echo json_encode('null_number');
}
if ($null_number!="" && $null_mail!="" && $null_password!="" && $null_name!="") {
echo json_encode('success');
}
?> ``

БЛОГ НА HUSL

Показ div исходя из ответа сервера используя

Ответы (0 шт):