我想从我的视图中发送组件道具,但是有一个空格,它让vue返回给我vendor.js:695 [Vue warn]: Error compiling template: - invalid expression: :user-name="Awesome Me"
- invalid expression: :user-name="Awesome Me"
我的观点:
<ActionButton :id="1"
:user-name="Awesome Me"
:main="1" />
我的组件:
<script>
export default{
props: {
id: {
type: String
},
userName:{
type: String
},
main: {
type: Boolean
}
},
methods: {
setAsMain(id){
// some stuff
},
},
computed: {
mainMessage(){
return this.main == 1 ? 'Main character' : '';
}
}
}
</script>
如何发送user-name
值由空格组成?
答案 0 :(得分:1)
我认为问题不在于空间,你在使用道具时使用v-bind
或:
,而在传递静态数据时,所以不需要这些,只需执行以下操作:
<ActionButton id="1"
user-name="Awesome Me"
main="1" />
答案 1 :(得分:0)
我遇到了同样的问题,并通过以下方式解决了问题:
<ActionButton :user-name="'Awesome Me'" />
请注意,我们必须使用另一个单引号, 我认为vue会将v-bind双引号中的任何内容解析为 code 而不是文本。 例如,如果我使用:
<ActionButton :buttonText="()=>'Awesome Me'" />
按钮上的文字为:
function() {return 'Awesome Me'}