我的 app.js vue 文件什么都不做

Question

Here is my blade file.这是我的刀片文件。 The v-models are not reactive, and the button does nothing when clicked. v-model 不是响应式的，单击按钮时什么也不做。 I am getting no errors from vue at all.我根本没有从 vue 中得到任何错误。 I tried running an alert() function in the mounted property, it worked fine.我尝试在挂载的属性中运行一个 alert() 函数，它运行良好。 But nothing else works?但没有其他工作？ What am I doing wrong?我究竟做错了什么？

<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>

And then my app.js file:然后我的 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 => {

            });
        }

    }
});

I don't understand why this is not working?我不明白为什么这不起作用？

Answer 1

Your contents are outside of div which id is app for Vue .您的内容在 div 之外，其中 id 是Vue app 。

look at this <div id="app"></div>看看这个<div id="app"></div>

Please make sure all of your elements which need to be with Vue is inside of your app div.请确保所有需要与 Vue 一起使用的元素都在您的应用程序 div 内。

correction:更正：

<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>

我的 app.js vue 文件什么都不做

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-10-26 04:23:06

我的 app.js vue 文件什么都不做

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-10-26 04:23:06

解决方案1
1 已采纳 2018-10-26 04:23:06