Однофайловый компонент Vue.js для ошибки цикла
По какой-то причине я не могу заставить цикл работать в одном файле .vue. Возникает следующая ошибка:
«Значение» свойства или метода не определено в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.
(Получение той же ошибки для значения ключа)
.vue файл:
<template>
<div class = "grid-view container mx-auto flex items-center py-4">
<div v-bind:for = "(value, key) in testdata">
{{ key }}: {{ value }}
</div>
</div>
</template>
<script>
export default {
props: [
'testdata'
]
}
</script>
HTML:
<test :testdata = "{'name':'sku','name':'test'}"></test>
Надеюсь, кто-то может помочь!
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
668
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Измените v-bind:for на v-for
<template>
<div class = "grid-view container mx-auto flex items-center py-4">
<div v-for = "(value, key) in testdata">
{{ key }}: {{ value }}
</div>
</div>
</template>
<script>
export default {
props: [
'testdata'
]
}
</script>
Ответ принят как подходящий
Заменить v-bind:for= на v-for=
<template>
<div class = "grid-view container mx-auto flex items-center py-4">
<div v-for = "(value, index) in testData" :key = "index">
{{ value }}
</div>
</div>
</template>
<script>
export default {
props: [
'testData'
]
}
</script>
Ваши тестовые данные неверны, поскольку вы используете объект один, который содержит два похожих ключа name:
<test :test-data = "{'name':'sku','name':'test'}"></test>
.. поэтому поместите каждый объект в массив:
<test :test-data = "[{ name: "sku" }, { name: "test" }]"></test>
Примечание для соглашений о коде:
При именовании реквизита в HTML используйте регистр kebap:
:test-data вместо :testdata
При именовании реквизита в JS используйте верблюжий регистр:
testData вместо testdata
Другие вопросы по теме
Почему мой вложенный дочерний компонент не отображает представление?
Привязка v-модели в IE11, vuejs 2
Моя функция загружается неправильно
Глобальное событие не запускается в другой компонент после уничтожения из одного vuejs 2
Как сделать настраиваемый $ option extends вычисляемый или функциональность методов vue
Где я могу добавить атрибуты к сгенерированным тегам скрипта перед созданием моего приложения Vue?
Vue2 + jQuery + jQuery UI
Как закрыть md-меню vue-material?
Возможно ли иметь файл конфигурации, который можно изменить после сборки без повторной сборки приложения?
Событие @click в динамическом списке компонентов
Похожие вопросы
Почему мой вложенный дочерний компонент не отображает представление?
Firesbase firestore не работает + Vuejs
Как искать фильтр firebase с помощью vue
Приложение VueJS Reminder и обновление элементов массива данных независимо
Шаблон vuejs, в том числе внутри html
Vue.js: установить свойство оцениваемого / привязанного к v в скрипте
Глобальное событие не запускается в другой компонент после уничтожения из одного vuejs 2
Как обновить данные только выбранного значения из цикла v-for массива в vue-cli
Из отправленных при нажатии на кнопку «Далее», как это предотвратить?
Вызов axios в методе с vuejs и nuxt
Потрясающее спасибо!