问题:
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=...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
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:
回答1:
Use like this: :content="tempCont"
<div id="tree">
<treeItem :title="Parent" :content="tempCont"></treeItem>
</div>
回答2:
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
},
}
回答3:
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.