VueJS发送带有空格的组件道具

时间:2017-03-15 10:28:09

标签: javascript vue.js

我想从我的视图中发送组件道具,但是有一个空格,它让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值由空格组成?

2 个答案:

答案 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'}