Передача объекта компоненту с помощью v-for
Я пытаюсь отправить серию объектов, находящихся в массиве, дочернему компоненту с помощью v-for, но когда я пытаюсь получить к ним доступ из дочернего компонента, он сообщает мне, что свойства не определены.
Я использую Quasar Framework на самом деле
Вот как я передаю данные:
<div class = "row justify-center">
<foo
v-for = "brand in brands"
:key = "brand.id"
:brand = "brand"
></foo>
</div>
<script>
import foo from "src/components/foo.vue";
export default {
components: {
foo
},
data() {
return {
brands: []
};
},
methods: {
async getData() {
let x = await get.getData();
this.brands = x.data;
console.info(this.brands);
}
},
mounted() {
this.getData();
}
};
</script>
brands - это массив, который получает два объекта из запроса, сделанного в локальную базу данных, который я уже подтвердил, что он правильно получает данные.
А это файл компонента и то, как я пытаюсь получить свойства:
<q-card class = "my-card" flat bordered>
<q-img
:src = "require(`../assets/${brand.img}`)"
:alt = "brand.img + ' Logo'"
/>
<div class = "text-h5 q-mt-sm q-mb-xs">{{ brand.name }}</div>
<div class = "text-caption text-grey">
<p>
{{ brand.price }}
</p>
</div>
<script>
export default {
name: "foo",
props: ["brand"],
data() {
return {
expanded: false
};
},
};
</script>
но когда я пытаюсь выполнить код, я получаю следующую ошибку:
Error in render: "Error: Cannot find module './undefined'
Я знаю один способ заставить его работать, и это создать свойство для каждого значения объекта, например:
<component
v-for = "brand in brands"
:key = "brand.id"
:name = "brand.name"
:price = "brand.price"
></component>
Но я не думаю, что это правильный способ сделать это ...
@Phil Я не называю компонент component в исходном коде ... Я изменил имя здесь, чтобы было легче читать
Предлагаю вам исправить свой вопрос, чтобы он лучше соответствовал действительности. Как видно из ответа ниже, в настоящее время это довольно запутанно.
Я думаю, вы неправильно поняли сообщение об ошибке. «Ошибка: не удается найти модуль './undefined'» ничего не говорит о том, что свойства не определены. Вы получите эту ошибку только от динамического import или require или, возможно, тега <img>, но ни один из них не появляется в вашем вопросе вообще. Для этого нужно гораздо больше деталей и шагов по отладке, прежде чем на него можно будет ответить.
да, вы правы, у меня есть изображение, и на нем я получаю ошибку. Я могу получить доступ к другим свойствам. Но что означает эта ошибка, когда исходит от изображения ?? Я собираюсь изменить вопрос, чтобы тег изображения был виден
Если бы это был мой код, я бы начал без компонента. Создайте div с v-for и вставьте разметку из компонента в родительский. Я бы начал без изображения. Затем я добавил изображение. Только тогда я бы попробовал переместить работающий код в компонент.
Либо сообщение об ошибке, указанное в вашем вопросе, не соответствует тому, которое вы фактически получаете, либо код в вашем вопросе не совпадает. Я не вижу в текущем коде ничего, что могло бы вызвать "Не удается найти модуль './undefined'"
ошибка исходит от :src = "require(`../assets/${brand.img}`)" кажется, что строка построена неправильно
Сделайте небольшую отладку. Какие типы значений есть в brand.img? Согласованы ли они с файлами изображений в каталоге src/assets?
Да, я обнаружил ошибку ... я использую orm sequelize, но я не знаю, где поле img не отвечает ... я должен это проверить, но спасибо вам, я нашел ошибку. Большое спасибо!!
Ответы 1
попытаться изменить
import component from "src/components/component.vue";
к
import foo from "src/components/component.vue";
в разделе компонентов вы просто вызываете foo вместо foo:component
Вопрос OP довольно сбивает с толку, поскольку они начали с component, а затем наполовину сменили на foo, но я не думаю, что это проблема
@Phil не видел предыдущую версию редактирования, возможно, проблема не в этом. но undefined, поскольку сообщение об ошибке может указывать на проблему с импортом
Я бы не стал называть ваш компонент
component, так как он наверняка будет конфликтовать со встроенным динамический компонент во Vue.