Slot and spinner not working when using vue@2.1.7

[altinselimi]

Hi,

I'm using vue@2.1.7 and vue-infinite-loading@2.0.0-rc.4, and instead of getting the spinner while loading the content, im getting a text "undefined". Everything else works fine. What could be the culprit ?

Thanks.

[PeachScript]

Could you paste your code of template here?

[altinselimi]

<v-layout>
    <div v-if="movies.length!==0" class="contentWrapper" style="width:100%;">
        <card v-for="movie in movies" @click.native='setActual(movie)' v-bind:name="movie.title" v-bind:imdb-rating="movie.imdb" v-bind:bgurl="movie.poster"></card>
    </div>
    <infinite-loading :on-infinite="onInfinite" :spinner="spiral" ref="infiniteLoading">
    </infinite-loading>
</v-layout>

[PeachScript]

The :spinner is a shorthand of the v-bind:spinner, so you can replace your spinner setting with the following ways:

1. Use a normal attribute:

<infinite-loading :on-infinite="onInfinite" spinner="spiral" ref="infiniteLoading"></infinite-loading>

2. Use a string:

<infinite-loading :on-infinite="onInfinite" :spinner="'spiral'" ref="infiniteLoading"></infinite-loading>

3. Use a variable:

<infinite-loading :on-infinite="onInfinite" :spinner="spinnerType" ref="infiniteLoading"></infinite-loading>
<!-- You must set the spinnerType in your script code -->

[PeachScript]

To this day, I received three issue about the same problem, but I didn't found the reason because of it still running well when I using vue@2.1.7 in my computer.

So I think it's a special and important problem in some special environment, I need your help to find the real reason @altinselimi @dinho-afsn @icyfire. First of all, I think we should to repeat the problem in JsFiddle, what do you think?

[dinho-afsn]

here my site http://afsn.tk/takao/
in vue tools spinner is set

view return in vuetools

distance: 100 prop
isComplete: false
isFirstLoad: false
isLoading: false
onInfinite: Function prop
scrollHandler: Function
scrollParent: Window
spinner: "spiral" prop
spinnerType: "loading-spiral" computed

See that in vuetools it appears computed as spiral

here my component http://pastebin.com/94juVv5H

[PeachScript]

@dinho-afsn Thanks, I found the problem in your site.

Which build tool did you used? And does this problem only appear in vue@2.1.7?

[dinho-afsn]

I use the elixir to generate my app.js. My application is hybrid.
I'm three days tested in all ways and all forms the spinner appears undefined

my gulp file:

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir.config.assetsPath = 'assets/';

elixir(mix => {
//mix.browserify('app.js');
mix.webpack('app.js');
mix.sass('app.scss');

mix.scripts([
    './node_modules/jquery/dist/jquery.js',
    './node_modules/bootstrap/dist/js/bootstrap.js',
    './node_modules/owl.carousel/dist/owl.carousel.min.js',
    //'./node_modules/vue-infinite-loading/dist/vue-infinite-loading.js',
], './public/js/vendor.js');

mix.styles([
    './node_modules/bootstrap/dist/css/bootstrap.min.css',
    './node_modules/owl.carousel/dist/assets/owl.carousel.min.css',
    './node_modules/owl.carousel/dist/assets/owl.theme.default.css',
    './node_modules/font-awesome/css/font-awesome.css'
], './public/css/vendor.css');

// mix.copy('node_modules/font-awesome/fonts', './assets/fonts');
/*
 mix.browserSync({
 proxy: 'localhost:8000'
 })
 */

});

[PeachScript]

Okay, but I have never used elixir, I need to try it base on your configurations.

[agustinprod]

I'm having the same issue, laravel project too, but i'm using webpack directly:

'use strict';

const path = require('path');
var webpack = require('webpack');

module.exports = {
	entry: './resources/assets/js/app',
	resolve: {
		alias: {
			root: path.join(__dirname, 'node_modules'),
			'vue$': 'vue/dist/vue.js',
		}
	},
	output: {
		path: path.resolve(__dirname, './public/js'),
		publicPath: '/js/',
		filename: 'all.js'
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: 'vue-loader',
				options: {
					loaders: {
						scss: 'style!css!sass'
					}
					// other vue-loader options go here
				}
			},
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{
				test: /\.(png|jpg|gif|svg|mp3)$/,
				loader: 'url-loader',
				query: {
					limit: 10000,
					name: '[name].[ext]?[hash]'
				}
			}
		],
	},
	plugins: [
		new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|es)$/),
		new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery"
		})
	],
	devtool: '#eval-source-map',
}

if (process.env.NODE_ENV === 'production') {
	module.exports.devtool = '#cheap-source-map'
	// http://vue-loader.vuejs.org/en/workflow/production.html
	module.exports.plugins = (module.exports.plugins || []).concat([
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: '"production"'
			}
		}),

		new webpack.optimize.UglifyJsPlugin({
			compress: {
				warnings: false
			}
		}),

		new webpack.optimize.OccurrenceOrderPlugin()
	])
}

Maybe is related to vue-loader.
The generated DOM:

<div data-v-34e13b62="" class="infinite-loading-container"><div data-v-34e13b62="" style="display: none;">undefined</div> <div data-v-34e13b62="" class="infinite-status-prompt" style="display: none;">undefined</div> <div data-v-34e13b62="" class="infinite-status-prompt">undefined</div></div>

[icyfire]

I use the Webpack + vue-loader.

[howyhuang]

为什么没有下拉刷新