鉴于此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,
};
},
});
用法(HAML):
%read-more{v: {bind: '{text: some_object.property}' }}
一切正常但我得到所有声明道具的Vue警告:
[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.
我做错了什么?
修改
我创造了一个很好用的小提琴:http://jsfiddle.net/oLt9wkxe/8/
在我的应用程序中,此组件嵌套在其他一些组件中。它工作得很好,但显示这些令人讨厌的警告!
答案 0 :(得分:1)
此属性将发送字符串
myBoolValue=false
此属性将发送布尔值
:myBoolValue="false"
这是强制类型和引发异常
props: { myBoolValue: Boolean }
这不会抱怨,但是您会得到一个字符串,而不是布尔值
props: [ "myBoolValue" ]
我所有的代码都作为推荐示例:
const MyTable = Vue.component("my-table", {
props: {
myBoolValue: Boolean // Force type
myStringValue: String,
myObject: Object
},
<my-table
ref="otbExpertTable_user"
:myBoolValue="false"
v-bind:is-mobile="isMobile"
v-on:hover-item="hoverItem"
:myObject=metaUsers
/>
答案 1 :(得分:0)
由于您通过vue-cli创建应用时安装的linter,因此您只能在本地版本上看到此警告。
'{text: some_object.property}'
显然是一个对象 - 有一个键和一个值。
我不知道HAML规范,但我强烈怀疑你应该使用bind: 'some_object.property'
。