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]

为什么没有下拉刷新

[PeachScript]

Which vue-loader version do you use? @dinho-afsn @killgt @icyfire

[dinho-afsn]

I tried to match your package.json, but it always returns undefined.

"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.7.5",
"babel-preset-es2015": "^6.6.0",
"babel-runtime": "^6.0.0",
"chai": "^3.5.0",
"css-loader": "^0.23.1",
"eslint": "^3.3.1",
"eslint-config-airbnb-base": "^5.0.2",
"eslint-loader": "^1.3.0",
"eslint-plugin-html": "^1.4.0",
"eslint-plugin-import": "^1.6.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.16.0",
"isparta-loader": "^2.0.0",
"karma": "^1.2.0",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^1.7.0",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"mocha": "^3.0.2",
"phantomjs-prebuilt": "^2.1.7",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^2.0.0-rc.6",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.2",
"vue-loader": "^9.4.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"

[dinho-afsn]

Now delete the folder node_modules, I will remove everything and try again from 0
I will include the version next, and some packages of your package and post it results already already

[PeachScript]

It's very weird, did you try to clone this repository and run it? @dinho-afsn

[dinho-afsn]

Yes, I did it and it works. They are certainly package dependencies.
But I use it in hybrid application, so it would be interesting to run it, not only in the bundle running as dev.
But today I'm going to spend all day here to find the error.

[dinho-afsn]

What I noticed is that in the next package, you do not use vue-infinite-loading in your package.json, why?

[dinho-afsn]

Will not be some problem in the npm repository version?

[PeachScript]

I have never install vue-infinite-loading through package.json in master and next branch, I import it from dist directory with webpack because I need to debug it.

[agustinprod]

My lock file if it helps:
https://gist.github.com/killgt/83ac60af6e3d898caa9c83a8b231a8bb

[dinho-afsn]

I'll do the same here to test it.

[icyfire]

我的vue-loader是10.0.2版本。我直接用你的源码作为component引入的话是正常的。

[PeachScript]

Did you use the webpack@2? @dinho-afsn @altinselimi @icyfire

[icyfire]

No, the webpack version i use is 1.14.0. @PeachScript

[PeachScript]

Thanks, I try to repeat this problem now, please tell us if you have any progress about this issue :P @icyfire

[PeachScript]

I found the real reason just now, it be cause by the breaking changes in the v2.1.7 of Vue.js, I missed the release notes ago, I will release a new version to fix it, please wait a moment.

Thank you all! @altinselimi @dinho-afsn @icyfire

[PeachScript]

I have been release a new version v2.0.0-rc.5 to fix this problem, you can upgrade it with npm and try again, please tell me if it still has problem :P

@altinselimi @dinho-afsn @icyfire

[PeachScript]

I will close this issue, you can reopen it if this problem still exist.