'v-bind' directives require an attribute value

Ok so first of all, when you v-bind something like v-bind:title or :title, what you bind is expressed as a javascript expression.

So if you want your title attribute to be the string Parent, you need either to write it like a native html attribute title="Parent" (notice the lack of :), or as a vue bound attribute v-bind:title="'Parent'" or :title="'Parent'" (notice the use of '' to express a string primitive type in javascript.

Now, the {{ variable }} syntax is used inside vuejs template but you do not need to use it inside v-bind attributes since they are already interpreted as javascript.

So you shouldn't write this:

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

but this instead:

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

SincetempCont is already a valid javascript expression.


Use like this: :content="tempCont"

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

You don't really need {{}} for passing attributes.

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

This shall be good enough to work. The puspose of {{}} is to print data and not pass attributes. Also, in your tree component, it's a good practice to follow object notations in your props. For ex:

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