I'm using vue 2.0.0 rc4 with webpack. I tried the example in the README.MD but it failed, here is the output of the console

vue.js?3de6:2508[Vue warn]: failed to compile template:

<label v-bind:for.once="id" v-bind:class="{ &quot;is-disabled&quot;: disabled, &quot;is-checked&quot;: isChecked }" class="mdl-checkbox mdl-js-checkbox"><input v-bind:value="value" type="checkbox" v-bind:id.once="id" v-model="checked" v-bind:disabled="disabled" class="mdl-checkbox__input"/><span class="mdl-checkbox__label"><slot></slot></span></label>

- invalid expression: v-bind:class="{ &quot;is-disabled&quot;: disabled, &quot;is-checked&quot;: isChecked }"

 (found in component <MdlCheckbox>)

What's wrong with the quotes ?

I'm not sure if this is really a problem with vue-mdl, but it certainly seems like it might be.

When I define an mdl-card as follows:

<mdl-card :title="title" :supporting-text="text" :actions="showLinks ? 'actions' : ''">
    <div slot="actions" v-if="showLinks">
        <!-- content here -->
    </div>
</mdl-card>

where showLinks is a computed boolean on my VM, I get a console error:

Uncaught TypeError: Cannot read property 'attributes' of undefined (vue.common.js?e881:3337)

Removing the binding for actions (i.e. the :actions="showLinks ? 'actions' : ''" everything starts working again. Do you have any idea what could cause this? Is there any more info I can provide?

Thanks again for an awesome library!

I get this console error when I include a component. I'm including the MDL javascript too, maybe i'm not including it in the right place? It's a little unclear in the documentation.

Uncaught ReferenceError: componentHandler is not defined

Here is the work so far to support VueJS 2.0. A high level overview.

• The toggle/radio controls now all work with a combination of 'v-model' and 'selected-value' properties.
• Because of the event propagation changes for Vue 2.0, Snackbar can't receive events broadcast from an arbitrary instance, so we instead have an override-able 'event-source' property. It defaults to "this.$root" so the event can be emitted on $root from any component. If you want to use some global event bus instead, you can set it there.
• There are two failing tests for badge, since, AFAICT, we can't have arbitrary extra props for directives, which was how the "hide-badge' support currently works.

Thanks!

I am using vue-mdl 0.10.0. The problem is that autocomoplete isn't working on textfields any ideas as to why.

<div class="mdl-textfield mdl-js-textfield">
<mdl-textfield floating-label="Email:" type="email" :value.sync="user.email" id="email" email="email" autocomplete="off"></mdl-textfield>
</div>

The usage of icon property of MdlButton has been changed since this commit. In newer version the code shown in the documentation does not work correctly.

The code in documentation:

<mdl-button icon>
  <i class="material-icons">star</i>
</mdl-button>

The new usage:

<mdl-button icon="star">
</mdl-button>

However, simply changing this may cause documentation works incorrectly and upgrading the VueMdl that the documentation uses may lead to other problems. Hope you could check the changes globally and update the documentation.

Hi, when I try to import vue-mdl module I get this error:

Cannot find module '!!./../node_modules/css-loader/index.js?sourceMap!./../node_modules/vue-loader/lib/style-rewriter.js!./../node_modules/vue-loader/lib/selector.js?type=style&index=0!./select.vue' 

My gulpfile.js

var gulp = require('gulp'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    livereload = require('gulp-livereload'),
    concat = require('gulp-concat'),
    babel = require('gulp-babel');

gulp.task('browserify', function() {
    browserify('src/app.js')
        .transform('babelify', {presets: ['es2015', 'react']})
        // .transform('envify')
        .transform('vueify')
        .bundle()
        .on('error', function(e) {
            console.error(e.message);
        })
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('www/js'))
        .pipe(livereload())
});

As you may know this already, there is an old github joke about coffeescript that "a library author uses coffeescript to reduce pull requests". Both jade & coffeescript might not be our cup of tea for many of us (I personally use jade but only on private repos).

Could you plz consider moving this repo to pure ES5/ES6 & HTML instead?

I kept trying to add the prop 'raised' and 'colored' to an mdl-button but with no luck:

<mdl-button raised colored v-mdl-ripple-effect>
<i class="material-icons">content_paste</i>
</mdl-button>

all i get is a basic button with ripple effect

Version 0.48.0 of rollup just got published.

The version 0.48.0 is not covered by your current version range.

Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

I recommend you look into these changes and try to get onto the latest version of rollup. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.

Your Greenkeeper Bot :palm_tree:

First of all, I'm 99% certain I'm using v1 :). Perhaps it's just the docs are out of step, but this:

<mdl-slider v-on:input="(v) => {this.timeout = v}" :value="timeout" min="0" max="10000" step="500"></mdl-slider>

results in 3 warnings in the console:

[Vue warn]: Invalid prop: type check failed for prop "step". Expected Number, got String. 
(found in component <MdlSlider> at /vue/vue-mdl/src/slider.vue)
[Vue warn]: Invalid prop: type check failed for prop "min". Expected Number, got String. 
(found in component <MdlSlider> at /vue/vue-mdl/src/slider.vue)
[Vue warn]: Invalid prop: type check failed for prop "max". Expected Number, got String. 
(found in component <MdlSlider> at /vue/vue-mdl/src/slider.vue)

and they are repeated every time the slider is updated. Is this in need of an upgrade, or should it be working? If the former, and if it's easier to describe than do, I'm happy to have a go...

When I add a slider to my Vue component as shown in the docs I get the following warning:

Computed property "valueNumber" was assigned to but it has no setter.

Sample component:

<template lang="pug">
    mdl-slider(v-model="amount" min="0" max="100")
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';

@Component
export default class SliderComponent extends Vue {
  private amount: number = 5;
}
</script>

A quick look into slider.vue shows that valueNumber indeed only has a getter defined like so:

valueNumber () {
  return Number(this.value)
},

From a quick google search it is my understanding that if a computed property is used with v-model, as is the case with valueNumber, it must have a corresponding setter.

Therefore my suggested fix is to simply add a setter for valueNumber.

Version 2.0.0 of eslint-config-posva was just published.

The version 2.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of eslint-config-posva.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Your Greenkeeper bot :palm_tree:

Version 5.0.0 of eslint was just published.

The version 5.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of eslint.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Your Greenkeeper bot :palm_tree:

Version 2.0.0 of webpack-dashboard was just published.

The version 2.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of webpack-dashboard.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Your Greenkeeper bot :palm_tree:

Version 4.0.1 of rollup-plugin-vue was just published.

The version 4.0.1 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of rollup-plugin-vue.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Your Greenkeeper bot :palm_tree:

Version 3.0.0 of codacy-coverage was just published.

The version 3.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of codacy-coverage.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Your Greenkeeper bot :palm_tree: