'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
},
}