Goodmorning everyone,
I thought if it was a good idea to add a props backgroundImage or something like that, for the component mdlCard, so you can dynamically add if necessary the images as wallpaper

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 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

Hope early support mdl-layout. I think it's a base element to build an APP or Website.

Thanks for the great job.

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

Is correct for remove the "is-focused" class after making the selection add this?

setName () {
  ...
  this.$els.textfield.classList.remove("is-focused")
}

Hi !

I am using the toggle component in my project.

However, the variable I am using for this component comes from an API with a value of 0 or 1 and the toggle component only recognize true or false. Is it my job to handle that or maybe we can improve the toggle component to be a little bit smarter ?

<mdl-switch :checked.sync="something" class="mdl-js-ripple-effect">
 </mdl-switch>

something = 0

[Vue warn]: Invalid prop: custom validator check failed for checked="something"
....

Thanks !

Good evening,
i re-installed vue-mdl for another project from npm. But when the installation is finished, i see that the version is the 0.75 and not the latest. How can i fix that ?

I understand the idea behind prefixing your components with mdl to avoid name clashes with regular html elements. But I feel like it'll be cleaner without those. Check out Material UI a similar project built in react.

Hi !

first of all, thank you for your work, it's amazing !

I am trying to use the tooltip component in a loop and I can't manage to have a dynamic "for" property. See my code here :

That gives :

It's a simple usage but I don't know how I can make it work.

Thanks !

Hi, is it possible to include only the components needed and not the whole framework?

mdl 1.1 was just released and they offer new interesting components!

Dialogs, aka Modals, documented here: https://getmdl.io/components/index.html#dialog-section

Example: http://codepen.io/Garbee/pen/EPoaMj

Here is a rough vue component for the mdl-dialog that could be use as basis for this feature: https://gist.github.com/martinlindhe/5bc834f410f958a65c7d

Card is an essential component in Material Design. Should this be implemented soon?

Hello, there is a problem in my project when I use tabs of vue-mdl.

At first, I install vue-mdl in my application by this

import Vue from 'vue'
import VueMdl from 'vue-mdl'
import VueRouter from 'vue-router'
import Router from './router-config'
import App from './App'


Vue.use(VueMdl)
Vue.use(VueRouter)

var app = Vue.extend(App)

var router = new VueRouter({
   'linkActiveClass': 'active'
})

Router(router)


router.start(app,  '#app')`

And then I use mdl-tabs in my components, the error happening:

Unknown custom element: <mdl-tabs> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: <mdl-tab> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I think that I have registered by Vue.use(VueMdl), because other components like mdl-card or mdl-button can work in my components.

The demo site does not work well in iPad Safari. It flickers when scrolling; the drop down menu would make the page blank; and scrolling fast causes the page to crash.

Is this an issue with vue.js or the mdl library?

Hi,

In the vue instance's lifecycle hooks (I try created / ready / beforeCompile), I want to dynamically load the options data from the promise object, but I find that once using the async http request/response, the options can be displayed, but after select one item, the populated options menu won't hide. Do you have any suggestions to resolve this issue?

Thanks.

hi!
I try press key "Tab" on keyboard from safari 9.1 and getn't effect focus into checkboxes.

Snackbar is a new mdl feature; documented here: https://getmdl.io/components/index.html#snackbar-section

Here is a rough impl of a vue component for the mdl-snackbar, that can be used as a basis for this feature: https://gist.github.com/martinlindhe/8be3cbe036d5582eba15

Hi!
I created a table and used code like these, just copy from mdl-table

native mdl-table code

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

The code created some checkboxes in first column, but i could not get checkboxes' status in vue.
So, i have to write some code to create checkboxes and get these status instead of using mdl-data-table--selectable in mdl-table.
Have a better way？Or will support mdl-table?

When I change the item selected, mdl-select shows the item.value rather than item.name.
I've created a demo on jsfiddle

It seems to be the problem with code in src/select.vue at line 52:

if (this.name === oldName) this.name = this.value

This code will always be triggered because it happens after value changed.

I'm using browserify, and I can require vue-mdl fine, but when I try to register components I get this error:

Uncaught TypeError: vmdl.registerAll is not a function

I try to use it, but there is no mdl style.

can anyone tell me where to find the style assets?

Installing this package for use with browserify throws the following error :

Do you have a demo page with code examples?

I would like to pass the mdl-textfield component the maximum number of characters allowed, but it doesn't seem to be possible.

Hello,
I don't understand why it does not work.
You can help me?

<template lang="jade">
  .loginPage
    form.loginForm(action="#")
      mdl-textfield(floating-label="Login" v-bind:value.sync="login")
      mdl-textfield(floating-label="Password" v-bind:value.sync="password")

      .loginFrom_btnWrap
        mdl-button(v-mdl-ripple-effect raised primay) Sign in
</template>

<script>
export default {
  data () {
    return {
      login: '',
      password: ''
    }
  }
}
</script>

<style lang="stylus">
  .loginPage
    display flex
    height 100%

  .loginForm
    width 300px
    margin auto
    padding 10px 20px

    border 1px solid rgba(0,0,0,.12)
    box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
</style>

Error:

Unhandled rejection SyntaxError: Unexpected identifier

Hey posva,

Great job for vue-mdl !

I appear to have a memory leak on the documentation website.

I am on OSX / Chrome49. Do you need more info ?

PS: I will try to help you release 1.0, this project seems fun ;)

For some reason Autocomplete label doesn't clear with dynamic data.

There is a discussion thread here.

I'm fairly new to vue & mdl, so not sure whether any other components other than textfield implements is-dirty checking, but would like to see vue-mdl check underlying model's value and trigger /call mdl's change() and checkDirty events.

This can be reproduced on the sample page on http://posva.net/vue-mdl/#!/dialogs

in the Dialog section click the button to show Dialog
keep hitting tab key

result: tab going through background page and data can also be entered.

Hope someone can advise on this problem. Thanks.

When a select field is inside a dialog box, clicking an element in the select doesn't close the select box.

It looks like some issue inside the dialog component preventing the click from propagating through.

I found out that if you push new data to the array that :options pointed to,clicking an element in the select doesn't close the select box. Is there any way to solve this issue?

Title.

Example code:

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

Hi,
this is a question more than an issue. I'd like to know, if it's possible to make work togheter vue-validator and mdl-textfield for validation. I'll tried to add the rules, but doesn't work. Any suggestions ?

how to set the select box a fix-height and make the options scrollable

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())
});

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 ?

While I realize mdl itself doent yet provide a select component to forms, the need
have arisen for me.

I hope to one day see support for this in vue-mdl :-)

Upstream: google/material-design-lite#854

The following vue component can be used in the meantime;
https://gist.github.com/martinlindhe/1693a2652bf2a609ee37

Hi,

<mdl-select label="Country" id="contry-select" :value.sync="country" :options="countriesArray"></mdl-select>

Once select one option of this component, how can I reset this component via the defined vm's methods, just like this component initialization? I try updating the vm.country as null or "", but it doesn't work as expected.

Appreciate your help!

in src/vmdl.js I'm importing and then exporting but I should instead use this syntax: export mdlButton from './button.vue' which is more concise

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?

Thank you for a great lib, Eduardo!
For those of us who don't use NPM, it should probably be noted that vue-mdl v0.7.4 requires Vue >= 1.0.21.

props: {
    checked: {
      type: [Array, Boolean, Number], // Vue < 1.0.21 throws an exception
      required: true,
      twoWay: true
    }
}

Getting this warning for mdl-textfield (haven't tried other components though) and noticed there is an extra div element wraps the textbox & label. Not sure, this is what causing the waring / I'm using the library correctly or not (couldn't find any doc/example with v-model usage).

This generates the warning

    <mdl-textfield  floating-label="Status"
                    :value.sync="status.name"
                    v-model="status.name"
                    v-on:keyup.enter="addStatus">
    </mdl-textfield>

Using plain mdl doesn't produce this warning.

    <div class="mdl-textfield mdl-js-textfield  mdl-textfield--floating-label">
      <input  type="text" value=""
              id="statusTextBox"
              class="mdl-textfield__input"
              v-model="status.name"
              @keyup.enter="addStatus">
      <label class="mdl-textfield__label" for="statusTextBox">Enter a Status</label>
    </div>

How can I change the primary and accent colors for the components?

I created the following dialog:

mdl-dialog(v-bind:title="title" display-on="actionDialog")
  p {{ text }}
  template(slot="actions")
    mdl-button(v-for="actionName in actionNames" primary raised) {{ actionName }}

export default {
  data: {
    title: 'This is the title',
    text: 'This is the text',
    actionNames: ['Action1', 'Action2', 'Action3'],
    actions: [this.callAction1, this.callAction2, this.callAction3],
  },
  methods: {
    openDialog () {
      this.$broadcast('actionDialog', ...this.actions)
    },
    callAction1 () {
      console.log('action1')
    },
    callAction2 () {
      console.log('action2')
    },
    callAction3 () {
      console.log('action3')
    }
  }
}

When calling openDialog, the dialog is displayed but the actions are not added to the buttons. In fact, when I click on the button nothing happens. If I close the dialog and reopen it, the buttons work as expected.

This code however seems to work the first time:

mdl-dialog(v-bind:title="title" display-on="actionDialog")
  p {{ text }}
  template(slot="actions")
    mdl-button(primary raised) {{ actionName[0] }}
    mdl-button(primary raised) {{ actionName[1] }}
    mdl-button(primary raised) {{ actionName[2] }}

Maybe an issue with the adding of the actions to the buttons that takes place before/after the v-for?

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.

Cards are missing features:

• Expand on title
• Menu icon
• Menu interaction
• Doc how events are fired
• Better doc on slots
• Set background with prop

Hi !

Tested on multiple operating systems, we have blurry text on tooltips when using Chrome :

http://posva.net/vue-mdl/#!/tooltips

Chrome version : 53.0.2785.116 (64-bit)

Thank you :)

At the moment vue-mdl has some custom methods to register directives but it should be used as a plugin:

Vue.use(vmdl)