Vue: Inline style and v-show compability

Created on 14 Nov 2016  ·  2Comments  ·  Source: vuejs/vue

Vue.js version

2.0.5

Reproduction Link

https://jsfiddle.net/leopoldthecuber/Lnzcwvy3/1/

Steps to reproduce

Run the demo

What is Expected?

Nothing is displayed

What is actually happening?

A red 'false' is displayed

This has something to do with the inline style style="color: red" on <my-component>. Remove it and the problem goes away.

Most helpful comment

already fixed with this PR https://github.com/vuejs/vue/pull/4138

All 2 comments

I found that v-show can not be used for the root element. Just:

Vue.component('my-component', {
  props: {
    visible: false
  },
  template: `
    <div><div v-show="visible">
      <span>{{visible}} - {{typeof visible}}</span>
    </div></div>
  `
});

var App = Vue.extend();

new App({
  el: '#app',
  data() {
    return {
      visible: false
    }
  },
  template: `
    <div>
      <my-component :visible="visible" style="color: red"></my-component> 
    </div>
  `
})

is working.

already fixed with this PR https://github.com/vuejs/vue/pull/4138

Was this page helpful?
0 / 5 - 0 ratings