Question

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

Answer 1

我认为问题不在于空间，你在使用道具时使用v-bind或:，而在传递静态数据时，所以不需要这些，只需执行以下操作：

<ActionButton id="1"
          user-name="Awesome Me"
          main="1" />

Answer 2

我遇到了同样的问题，并通过以下方式解决了问题：

<ActionButton :user-name="'Awesome Me'" />

请注意，我们必须使用另一个单引号，我认为vue会将v-bind双引号中的任何内容解析为 code 而不是文本。例如，如果我使用：

<ActionButton :buttonText="()=>'Awesome Me'" />

按钮上的文字为：

function() {return 'Awesome Me'}

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

2 个答案: