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

項目是對象的列表（數組）。 如果要訪問列表中的 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>

希望這更有意義。