[英]Laravel 5.7 vueJS component is mounted but not in 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'
});
我试图让它像这样:
你没有反应状态意味着你没有指定一个。 您可以像这样指定一个。
const app = new Vue({
el: '#app',
data() {
return {
message: 'hello, world!'
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.