[英]Vue js props no data
我无法将数据传递给 VueJS 中的道具。 这是我的代码:
const projects = [{ id: 1, name: 'First', img: "https://randomwordgenerator.com/img/picture-generator/53e0d7414855ac14f1dc8460962e33791c3ad6e04e5074417d2e72d2964cc6_640.jpg" },
{ id: 2, name: 'Second', img: "https://randomwordgenerator.com/img/picture-generator/paper-1100254_640.jpg" },
{ id: 3, name: 'Third', img: "https://randomwordgenerator.com/img/picture-generator/5fe2d4414352b10ff3d8992cc12c30771037dbf85254794075287cd69145_640.jpg" },
{ id: 4, name: 'Forth', img: "https://randomwordgenerator.com/img/picture-generator/5fe1d3414256b10ff3d8992cc12c30771037dbf8525478487c2f79d5924e_640.jpg" }
]
const Project = {
props: ['img', 'name'],
template: `
<div class="container projectbox">
<div class="textandimage"> Name: {{ projects.name }} </div>
</div>
`,
data() {
return {
projects
}
}
}
img:未定义名称:未定义
请帮忙。
项目是对象的列表(数组)。 如果要访问列表中的 Object,则需要参考其 position。 例如:
<div class="textandimage"> Name: {{ projects[0].name }} </div>
这将访问列表中的第一个 Object,并返回键名的值
编辑:for循环
如果要将数据循环到模板,请执行以下操作:
<div v-for="(item, index) in projects" class="container projectbox":key="index"> <div class="textandimage"> Name: {{ item.name }} </div> </div>
希望这更有意义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.