Why is Vue.JS not seeing the variable?

R

Rishat Sultanov2017-09-03 20:29:50

JavaScript

Rishat Sultanov, 2017-09-03 20:29:50

Good afternoon!
There is this code:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<!--    //////////// JS ////////////////////////-->
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/tether.js"></script>
    <script src="assets/js/bootstrap.js"></script>
<!--    /////////// CSS //////////////////////////////////-->
    <link rel="stylesheet" href="assets/css/tether.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bulma.css">
    <title>LOGIN</title>
    <style>
        .boder
        {
            background-color: #8193ff;
        }
        #main
        {
            background-color: #8193ff;
        }
        .center-form
        {
            background-color: #3b7cff;
            margin: 300px;
            border-radius: 20px;
        }
    </style>
</head>
<body class="boder" id="login">
<div id="main">
<div id="email-error" style="padding-left: 30%; padding-right: 30%; padding-top: 3px;" v-if="seen"><email-error><email-error/></div>
<form class="center-form" style="margin-top: 100px;">
    <div class="form-group">
        <label for="exampleInputEmail1" style="margin-left: 10px">{{ email }}</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="emailwriting">
    </div>
    <button type="submit" class="btn btn-primary" style="margin-left: 40%; margin-bottom: 8px">{{ submit }}</button>
</form>
</div>
<script src="assets/new/js/vue-erroremail.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            email: "Ваша почта",
            emailwriting: "Укажите email который Вам выдали.",
            submit: "Подтвердить",
            seen: true
        },
        watch: {
            emailwriting: function (val) {
                var re = new RegExp('^[\\w.+\\-][email protected]\\.kg$');
                if(re.test(this.emailwriting)){
                    console.log('Email прошел проверку');
                }


            }
        }
    })
</script>
</body>
</html>

Made v-if="seen" to pass true or false there.
But Vue.JS says it doesn't see seen.

[Vue warn]: Property or method "seen" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

oh, 2017-09-03
@rishatss

you have el: '#main' and seen is searched from div id="email-error"