'v-bind'指令需要一个属性值

Question

我正在尝试使用vue.js创建某种类型的树，并且遇到了元素道具的问题。请帮我。

我尝试过:content="{{tempCont}}"，也曾经尝试过content="{{tempCont}}"，但是没有一个起作用。

这是我使用tree元素的地方：

<div id="tree">
    <treeItem :title="Parent" :content="{{tempCont}}"></treeItem>
</div>

这是整个树元素：

<template>
    <div>
        <p v-on:click="openTree">{{title}}</p>
        <div id="childs" v-if="childVisibility">
            <treeItem v-for="item in content" :key="item" title=item>
        </div>
    </div>
</template>

<script>
export default {
    data: {
        childVisibility: false
    },

    methods: {
        openTree: function(){
            childVisibility = !childVisibility;
        }
    },

    props: {
        title: String,
        content: Array,
    }
}
</script>

<style scoped>

</style>

我收到此错误：

Answer 1

像这样使用：:content="tempCont"

<div id="tree">
  <treeItem :title="Parent" :content="tempCont"></treeItem>
</div>

Answer 2

好吧，首先，当您对v-bind:title或:title之类的内容进行v绑定时，绑定的内容将表示为javascript表达式。

因此，如果您希望title属性为字符串Parent，则需要像原生html属性title="Parent"一样编写它（注意缺少: ），或作为Vue绑定属性v-bind:title="'Parent'"或:title="'Parent'"（请注意，使用''来表示javascript中的字符串原始类型。

现在，{{ variable }}语法在vuejs模板中使用，但是您无需在v-bind属性中使用它，因为它们已经被解释为javascript。

所以你不应该这样写：

<div id="tree">
    <treeItem :title="Parent" :content="{{tempCont}}"></treeItem>
</div>

但是，相反：

<div id="tree">
    <treeItem title="Parent" :content="tempCont"></treeItem>
</div>

因为tempCont已经是有效的javascript表达式。

Answer 3

您真的不需要{{}}来传递属性。

<treeItem :title="Parent" :content="tempCont"></treeItem>

这将足以正常工作。 {{}}的目的是打印数据而不传递属性。 另外，在树组件中，在道具中遵循对象符号是一种很好的做法。例如：

props: {
    title: {
        type: String
    },
    content: {
        type: Array
    },
}