Question

这是我的刀片文件。 v模型不具有反应性，单击时按钮不执行任何操作。我完全不会从vue中得到任何错误。我尝试在mounted属性中运行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 => {

            });
        }

    }
});

我不明白为什么这不起作用？

Answer 1

您的内容不在div之外，该ID是f=["-5","-4","-3","-2","-1","0","1","2","3","4","5"] for i, x in enumerate(f): f[i] = x.replace("-","M") print(f)的应用程序。

看看这个Vue

请确保您需要与Vue一起使用的所有元素都在您的应用div中。

更正：

<div id="app"></div>

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

1 个答案: