Javascript “v-bind”指令需要一个属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54236825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'v-bind' directives require an attribute value
提问by MrLalatg
I am trying to create some type of tree with vue.js and stuck on a problem with element props. Help me out plz.
我正在尝试使用 vue.js 创建某种类型的树，但遇到了元素道具的问题。请帮帮我。
I've tried :content="{{tempCont}}"and I've tried content="{{tempCont}}", but none of them worked.
我试过:content="{{tempCont}}"，也试过content="{{tempCont}}"，但没有一个奏效。
Here's the place where I am using treeelement:
这是我使用tree元素的地方：
<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:
我收到此错误：
回答by Sajib Khan
Use like this: :content="tempCont"
像这样使用： :content="tempCont"
<div id="tree">
<treeItem :title="Parent" :content="tempCont"></treeItem>
</div>
回答by Saraband
Ok so first of all, when you v-bind something like v-bind:titleor :title, what you bind is expressed as a javascript expression.
好的，首先，当您 v-bind 之类的东西v-bind:titleor 时:title，您绑定的内容表示为 javascript 表达式。
So if you want your titleattribute 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.
因此，如果您希望您的title属性是 string Parent，则需要将其编写为原生 html 属性title="Parent"（注意缺少:），或者作为 vue 绑定属性v-bind:title="'Parent'"或:title="'Parent'"（注意''在 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.
现在，{{ variable }}语法在 vuejs 模板中使用，但您不需要在 v-bind 属性中使用它，因为它们已经被解释为 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>
SincetempContis already a valid javascript expression.
因为tempCont已经是一个有效的 javascript 表达式。
回答by pkimtani
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
},
}
