[Vue warn]: Incorrect hint: type checking was not performed for the "X" support. Expected Received String

Question

Given this component of Vue 2:

Vue.component('read-more', { props: { 'text': String, 'clamp': { type: String, default: 'Read More' }, 'less': { type: String, default: 'Read Less' }, 'length': { type: Number, default: 100 } }, template: ` <p> <span v-if="!show">{{truncate(text)}} <a href="javascript:;" v-if="text.length >= length" @click="toggle()">{{clamp}}</a></span> <span v-if="show">{{text}} <a href="javascript:;" @click="toggle()" v-if="text.length >= length">{{less}}</a></span> </p> `, methods: { truncate(string) { if (string) { return string.toString().substring(0, this.length); } return ''; }, toggle() { this.show = !this.show; }, }, data() { return { show: false, counter: this.length, }; }, }); 

Usage (HAML):

 %read-more{v: {bind: '{text: some_object.property}' }} 

Everything is working fine, but I get Vue warnings for all declared details:

 [Vue warn]: Invalid prop: type check failed for prop "text". Expected , got String. [Vue warn]: Invalid prop: type check failed for prop "clamp". Expected , got String. [Vue warn]: Invalid prop: type check failed for prop "less". Expected , got String. [Vue warn]: Invalid prop: type check failed for prop "length". Expected , got Number. 

What am I doing wrong?

EDIT

I created a fiddle that works great: http://jsfiddle.net/oLt9wkxe/8/

In my application, however, this component is embedded in several other components. It works great, but shows these warnings that are annoying!

Answer 1

You see this warning only in your local version due to the linter, which is set when creating your application through vue-cli.

'{text: some_object.property}' - this is obviously an object - there is a key and a value.

I do not know the HAML specification, but I strongly suspect you should just use bind: 'some_object.property' .