Question

所以我一直在解决这个问题，基本上我让我的组件运行一个控制台日志代码，该代码显示该组件已安装。但是它不在开发工具中。我检查了我是否在配置上使用本地开发环境，它也在屏幕截图中显示了我的身份。我还将组件放在正在使其无法在devtools中查看的页面中。我也尝试过

window.Vue.config.devtools = true;
window.Vue.config.debug = true;
window.Vue.config.silent = false;

但是没有运气。知道为什么会这样吗？

编辑：这是我的刀片服务器代码：

@extends('templates.master')
    @section('content')
        <div id="app">
            <div class="container-fluid">
                <div class="animated fadeIn">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-align-justify"></i> Create a data list group
                                    <a href="{{ route('datalist.index') }}" class="btn btn-danger float-right text-light"><b><i class="icon-arrow-left"></i></b></a>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12 col-lg-12">
                                            <form method="POST" action="{{ route('datalist.store') }}">
                                                {{ csrf_field() }}
                                                <div class="form-group">
                                                    <label for="name">Name</label>
                                                    <input type="text" class="form-control" value="{{ old('name') }}" name="name" id="name" aria-describedby="name" placeholder="Enter List Name">
                                                </div>
                                                <div class="form-group">
                                                    <label for="data_list_group_id">Select a group this list belongs to</label>
                                                    <select name="data_list_group_id" class="form-control" id="data_list_group_id" required>
                                                        @foreach($groups as $group)
                                                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <label>Addional Columns</label>
                                                <datalist-column></datalist-column>
                                                @include('snippets.dialogs')
                                                <button type="submit" class="btn btn-primary float-right">Create</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('additionalJS')
        <script src="{{ mix('js/app.js') }}"></script>
    @endsection

这是我的组件代码：

<template>
    <div>
        <div class="input-group mb-3" v-for="(column, index) in columns">
            <input type="text" class="form-control" placeholder="Column name" aria-label="Column name" aria-describedby="Column name">
            <div class="input-group-append" v-if="(index + 1) == columns.length">
                <button class="btn btn-primary" type="button" :id="index" @click="alert('HERE')">Add Column</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                columns: [''],
            }
        },
        mounted(){
            console.log('Component mounted.');
            this.appendColumn('HERE');
        },
        updated: function () {
        },
        computed: {},
        watch: {},
        methods: {
            appendColumn(name){
                console.log("HERE");
                var app = this;
                app.columns.push(name);
            }
        },
        components: {}
    }
</script>

这是我的app.js代码：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
window.Vue.config.devtools = true;
window.Vue.config.debug = true;
window.Vue.config.silent = false;
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
Vue.component('datalist-column', require('./components/DataList/DataListColumn.vue'));

const app = new Vue({
    el: '#app'
});

我正在尝试使它像这样：

Answer 1

您没有反应性状态，这意味着您尚未指定一个。您可以这样指定。

const app = new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello, world!'
        }
    }
});

您会发现所有这些很棒的东西，更正确的是here on the documentation

Laravel 5.7 vueJS组件已安装，但未安装在devtools中

1 个答案: