Блог

Я не могу передавать данные реквизитам в 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:неопределенное
имя:неопределенное

Пожалуйста, помогите.

Проекты-это список (Массив) объектов. если вы хотите получить доступ к объекту в списке, вам необходимо указать его местоположение. например:

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

Это приведет к доступу к первому объекту в вашем списке и вернет значение имени ключа

ИЗМЕНИТЬ: для цикла

Если вы хотите просмотреть данные в шаблоне, сделайте что-нибудь вроде этого:

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

Надеюсь, в этом больше смысла.