Мой файл vue app.js вообще ничего не делает

Вот мой файл с клинком. V-модели не являются реактивными, и при нажатии на кнопку ничего не происходит. Я вообще не получаю ошибок от vue. Я пробовал запустить функцию alert () в смонтированном свойстве, она сработала нормально. А больше ничего не работает? Что я делаю неправильно?

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Flower Company</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/fontawesome-pro.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<meta name="csrf-token" content="{{csrf_token()}}">

<!------ Include the above in your HEAD tag ---------->

</head>
<body>
    <div id="app"></div>
        <table class="table">
            <form action="#" @submit.prevent="validateData" @keydown="errors.clear($event.target.name)">
                <tbody>
                    <tr></tr>
                    <tr>
                        <td>
                            <input type="text" name="name" v-model="model.name" class="input_title_desc" required placeholder="Name"><!-- End td 1 -->
                        </td>
                        <td>
                            <input type="text" name="email" v-model="model.email" class="input_title_desc" id="email" placeholder="Email">

                            <!-- End td 2 -->
                        </td>
                        <td>
                            <input type="text" name="phone" v-model="model.phone" class="input_title_desc" id="phone" required placeholder="Phone">

                            <!-- End td 3 -->
                        </td>
                    </tr>
                    <tr></tr>
                    <tr>
                        <td colspan="3">
                            <input type="text" name="address" v-model="model.address" 
                                    class="input_description" placeholder="Address">
                            <button type="button" class="btn_add_fin" @click="validateData">
                                <i class="far fa-user-plus fa-2x"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3"></td>
                    </tr>
                </tbody>
            </form>
        </table>
    </div>
    <script src="{{asset('js/app.js')}}"></script>
</body>
</html>

А затем мой файл app.js:

import Vue from 'vue'

window.Vue = require('vue');
window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

class Errors
{
    constructor()
    {
        this.errors = {};
    }

    get(field)
    {
        if (this.errors[field]) {
            return this.errors[field][0];
        }
    }

    record(errors)
    {
        this.errors = errors;
    }

    clear(field)
    {
        delete this.errors[field];
    }

    has(field)
    {
        return this.errors.hasOwnProperty(field);
    }

    any()
    {
        return Object.keys(this.errors).length > 0;
    }
}


new Vue({
    el: '#app',
    data: {
        errors: new Errors(),
        model: {
            name: '',
            email: '',
            phone: '',
            address: ''
        }
    },


    methods: {

        validateData: function() {
            axios.post('/validate-data', this.$data.model)
            .then((response) => {
                console.log(response);
                var date = $('#email').val();
                var description = document.querySelector('.input_description').value;
                var title = document.querySelector('.input_title_desc').value;
                var action = $('#phone').val();

                var class_li  =['list_shopping list_dsp_none','list_work list_dsp_none','list_sport list_dsp_none','list_music list_dsp_none'];

                var cont = '<div class="col_md_1_list"><p>'+action+'</p></div><div class="col_md_2_list"><h4>'+title+'</h4><p>'+description+'</p></div><div class="col_md_3_list"><div class="cont_text_date"><p>'+date+'</p></div><div class="cont_btns_options"><i class="fas fa-mobile-alt fa-2x" style="color: #6d696f;"></i><ul><li><a href="#finish" onclick="finish_action('+select_opt+','+contador+');" ><i class="far fa-times-circle fa-2x"></i></a></li></ul></div></div>';

                var li = document.createElement('li');
                li.className = class_li[select_opt]+" li_num_"+contador;

                li.innerHTML = cont;
                document.querySelectorAll('.cont_princ_lists > ul')[0].appendChild(li);

                setTimeout(function(){  document.querySelector('.li_num_'+contador).style.display = "block";
                },100);

                setTimeout(function(){
                    document.querySelector('.li_num_'+contador).className = "list_dsp_true "+class_li[select_opt]+" li_num_"+contador;
                    contador++;
                },200);

                $('#email').val('');
                $('.input_description').val('');
                $('.input_title_desc').val('');
                $('#phone').val('');
            })
            .catch(error => {

            });
        }

    }
});

Я не понимаю, почему это не работает?

1
0
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваше содержимое находится за пределами div, идентификатор которого является приложением для Vue.

look at this <div id="app"></div>

Пожалуйста, убедитесь, что все ваши элементы, которые должны быть с Vue, находятся внутри вашего приложения div.

исправление:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Flower Company</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/fontawesome-pro.css" rel="stylesheet">

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <meta name="csrf-token" content="{{csrf_token()}}">

    <!------ Include the above in your HEAD tag ---------->

</head>
<body>
<div id="app">
    <table class="table">
                <form action="#" @submit.prevent="validateData" @keydown="errors.clear($event.target.name)">
                <tbody><tr>

                </tr>
                <tr>
                    <td>
                        <input type="text" name="name" v-model="model.name" class="input_title_desc" required placeholder="Name"><!-- End td 1 -->
                    </td>
                    <td>
                        <input type="text" name="email" v-model="model.email" class="input_title_desc" id="email" placeholder="Email">

                        <!-- End td 2 -->
                    </td>
                    <td>
                        <input type="text" name="phone" v-model="model.phone" class="input_title_desc" id="phone" required placeholder="Phone">

                        <!-- End td 3 -->
                    </td>
                </tr>
                <tr>
                </tr>
                <tr>

                    <td colspan="3">
                        <input type="text" name="address" v-model="model.address" class="input_description" placeholder="Address">
                        <button type="button" class="btn_add_fin" @click="validateData"><i class="far fa-user-plus fa-2x"></i></button>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">

                    </td>
                </tr>
                </tbody>
                </form>
            </table>
    </div>
<script src="{{asset('js/app.js')}}"></script>

</body>
</html>

Спасибо, не могу поверить, что упустил это из виду.

Polaris 26.10.2018 06:29

Другие вопросы по теме