'v-bind' directives require an attribute value

Question

I am trying to create some type of tree with vue.js and stuck on a problem with element props. Help me out plz.

I've tried :content="{{tempCont}}" and I've tried content="{{tempCont}}" , but none of them worked.

Here's the place where I am using tree element:

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

Here's the entire tree element:

<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>

I am getting this error:

Answer 1

Use like this: :content="tempCont"

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

Answer 2

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>

Since tempCont is already a valid javascript expression.

Answer 3

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

Answer 4

Also you should make your components data reactive and making sure that childVisibility is set to this instance rather than a direct reference by setting it like this

export default {
data() {
    return {
        childVisibility: false
    }
},

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

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

}