小编Hal*_*ggs的帖子

我收到了这个错误.昨天运行gulp工作得很好,但今天早上(改变了NO代码),我收到了这个错误.

$ gulp
[08:54:10] Using gulpfile C:\Source\Source2\bunny-meadows\gulpfile.js
[08:54:10] Starting 'scripts'...
[08:54:10] 'scripts' errored after 11 ms
[08:54:10] TypeError: listener must be a function
    at TypeError (<anonymous>)
    at DestroyableTransform.addListener (events.js:130:11)
    at DestroyableTransform.Readable.on (C:\Source\Source2\bunny-meadows\node_mo
dules\gulp-uglify\node_modules\through2\node_modules\readable-stream\lib\_stream
_readable.js:729:33)
    at Gulp.<anonymous> (C:\Source\Source2\bunny-meadows\gulpfile.js:37:10)
    at module.exports (C:\Source\Source2\bunny-meadows\node_modules\gulp\node_mo
dules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Source\Source2\bunny-meadows\node_modules\
gulp\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Source\Source2\bunny-meadows\node_modules\
gulp\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Source\Source2\bunny-meadows\node_modules\gul
p\node_modules\orchestrator\index.js:134:8)
    at c:\Users\hschillig.SCDL\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js
:129:20
    at process._tickCallback (node.js:419:13)

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error
    at new JS_Parse_Error (C:\Source\Source2\bunny-meadows\node_modules\gulp-ugl
ify\node_modules\uglify-js\lib\parse.js:196:18)
    at js_error (C:\Source\Source2\bunny-meadows\node_modules\gulp-uglify\node_m
odules\uglify-js\lib\parse.js:204:11)
    at croak (C:\Source\Source2\bunny-meadows\node_modules\gulp-uglify\node_modu …

我最终会为每个页面嵌套很多不同的组件.我的应用程序中的每个页面都有一个组件视图.在每个页面上,有不同的Vue实例将重复使用我所创建的组件,如滑块,tabber,轮播等.

我正在尝试重构这个,因为很多Vue实例互相干扰,我意识到我应该只有一个带有大量内部组件的主Vue实例.

这是我到目前为止所建立的:

http://jsfiddle.net/jmtg5r4s/

问题是它在加载主视图组件后停止.它不会加载任何嵌套组件,除非我为它们设置了一个我不想做的模板,因为我想利用Laravel刀片语法而不使用常规HTML.加上我所有的服务器端助手等.

使用Javascript:

var App = new Vue({
    el: '#app',

    attached: function() {
        console.log('main app loaded');
    },

    components: {
        'home-view': {

            attached: function() {
                console.log('home view loaded');
            },

            components: {
                'home-slider': {

                    attached: function() {
                        console.log('homepage slider loaded');
                    },

                    components: {
                        'slider': {

                            template: '#slider-template',
                            replace: true,

                            attached: function() {
                                console.log('general slider component loaded');
                            },

                            components: {
                                'slide': {

                                    template: '#slide-template',
                                    replace: true,

                                    props: ['index', 'text'],

                                    attached: function() {
                                        console.log('general slide component loaded');
                                    }

                                }
                            }

                        } …

所以我看到elixir不会自动使用autoprefixer.这是我的gulp文件的样子:

var Elixir = require('laravel-elixir');
var autoprefixer = require('gulp-autoprefixer');
var gulp = require('gulp');

Elixir.config.sourcemaps = false;

gulp.task('sass', function() {
    return gulp.src('resources/sass/app.scss')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('public/css/app.css'));
});

Elixir(function(mix) {

    // Copy bootstrap.min.js to node vendor directory until it becomes a node module
    mix.copy('public/vendor/bootstrap-4', 'node_modules/bootstrap-4');

    // Combine all vendor scripts
    mix.scripts([
        'bootstrap-4/dist/js/bootstrap.min.js',
        'vue/dist/vue.min.js'
    ], 'public/js/vendor.js', 'node_modules');

    // Combine all files into one single CSS file
    mix.task('sass', 'resources/sass/**/*.scss');

    // Get rid of cached version
    mix.version([
        'public/js/vendor.js',
        'public/css/app.css'
    ]); …

所以我有一个像这样的对象:

this.$ - 这包含保存数组的索引.例如,它有两个不同的索引:一个叫做slide,一个叫做thumb.这些索引包含数组.

我正在开发vue并让那些显示v-ref属性.但是,每当我这样做:

console.log(this.$.slide.length)

它回来为0.我试图循环使用forEach()但不能,因为它显示0,即使该数组中有明显4个VueComponent对象.

我真的不明白它为什么说幻灯片:array [0],但是接着在下一行显示slide:array [4].我试过进去this.$.slide.slide,但那是不确定的.

感谢您的任何见解.

编辑:

这是我的Vue HTML:

<slider inline-template img-count="4" v-ref="slider">
    <div class="slides" v-style="styles">
        <sliderslide v-repeat="count" v-ref="slide">
            <img src="{{ gallery_image('HM722_Silver_Creek_9978.jpg', 'full') }}" alt="HM722 Silver Creek" style="margin-top:-15%;" />
        </sliderslide>
    </div>

    <div class="thumbnails">
        <div class="thumbnail-wrapper">
            <sliderthumb v-repeat="count" send-index="@{{ updateIndex }}" v-ref="thumb" 
                image-src="{{ gallery_image('HM722_Silver_Creek_9978.jpg') }}" 
                image-alt="" 
                caption="Newest Product">
            </sliderthumb>
        </div>
    </div>
</slider>

v-refs已经存在,所以应该向他们展示......

我是ready在Vue 内部的方法中的所有这些的console.log().