camelCase attribute params are not propagated to child component

[jsedlacek]

var vm = new Vue({
  template: '<x-dialog showCloseButton= "{{showCloseButton}}">',
  data: {
    showCloseButton: true
  },
  components: {
    'x-dialog': {
      template: '<button v-if="showCloseButton">Close</button>',
      paramAttributes: ['showCloseButton']
    }
  }
});
vm.$mount();
vm.$appendTo(document.body);
vm.showCloseButton = false;

assert.equal(vm.$el.innerText, '');

Result:

Uncaught AssertionError: expected 'Close' to equal ''

[yyx990803]

This is because HTML attributes do not differentiate between upper and lower case, so your showCloseButton attribute is actually treated as showclosebutton.

To get around this you can just use dash case for you paramAttributes, and Vue will auto convert it to camel case when setting it on the data. So:

var vm = new Vue({
  template: '<x-dialog show-close-button= "{{showCloseButton}}">',
  data: {
    showCloseButton: true
  },
  components: {
    'x-dialog': {
      template: '<button v-if="showCloseButton">Close</button>',
      paramAttributes: ['show-close-button']
    }
  }
});

[jsedlacek]

Thanks, I see it in the api docs now. However it's not very intuitive. Maybe a warning when you use paramAttribute in camel case would be a good idea.

[yyx990803]

Good idea, added :)

[jsedlacek]

perfect, thanks.