Vue js props 没有数据

Question

我无法将数据传递给 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:未定义 名称：未定义

请帮忙。

Answer 1

Projects 是一个对象列表（数组）。如果要访问列表中的对象，则需要引用它的位置。例如：

<div class="textandimage"> Name: {{ projects[0].name }} </div>

这将访问列表中的第一个对象，并返回键 name

的值

编辑：for循环

如果您想将数据循环到模板，请执行以下操作：

<div v-for="(item, index) in projects" class="container projectbox" :key="index">
  <div class="textandimage"> Name: {{ item.name }} </div>
</div>

希望这更有意义。