我尝试从本地JSON呈现数据时,我在Vue项目中遇到问题。我已阅读说明并按照说明进行操作-每一步-但错误普遍存在。由于我不熟悉Vue和高级编程本身,因此我寻求帮助。
english.json
{
"0": {
"text": "This be a square",
"color": "blue",
"size": "small"
},
"1": {
"text": "here lies a square",
"color": "red",
"size": "medium"
},
"2": {
"text": "Tharr be a squaree",
"color": "black",
"size": "large"
}
}
ExperienceText.vue
<template>
<article class="content__box" :v-for="data in expJson">
{{data.text}}
<h6>{{data.text}}</h6>
<h3>{{data.color}}</h3>
<p>{{data.size}}</p>
</article>
</template>
<script>
import json from "@/components/json/english.json";
export default {
name: "ExperienceText",
data() {
return {
expJson: json
};
}
};
</script>
错误
[Vue警告]:属性或方法“数据”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保在data选项中或对于基于类的组件,此属性都是反应性的。参见:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
found in
---> <ExperienceText> at src/components/mainComp/subComp/ExperienceText.vue
<ExperienceSection> at src/components/mainComp/ExperienceSection.vue
<Experience> at src/components/mainComp/Experience.vue
<Main> at src/components/Main.vue
<Container> at src/views/Container.vue
<App> at src/App.vue
<Root>
Show 60 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <ExperienceText> at src/components/mainComp/subComp/ExperienceText.vue
<ExperienceSection> at src/components/mainComp/ExperienceSection.vue
<Experience> at src/components/mainComp/Experience.vue
<Main> at src/components/Main.vue
<Container> at src/views/Container.vue
<App> at src/App.vue
<Root>
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"
found in
---> <ExperienceText> at src/components/mainComp/subComp/ExperienceText.vue
<ExperienceSection> at src/components/mainComp/ExperienceSection.vue
<Experience> at src/components/mainComp/Experience.vue
<Main> at src/components/Main.vue
<Container> at src/views/Container.vue
<App> at src/App.vue
<Root>
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'text' of undefined
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"db619a62-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/mainComp/subComp/ExperienceText.vue?vue&type=template&id=088f3b1e& (app.js:1089), <anonymous>:15:36)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at new Watcher (vue.runtime.esm.js?2b0e:4468)
at mountComponent (vue.runtime.esm.js?2b0e:4073)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5978)
at createElm (vue.runtime.esm.js?2b0e:5925)
json到达
在我的应用文章中,标记根本不可见。我很确定这是因为json数据无法正确呈现。如何解决此问题?
首先,从:
中删除v-for
,因为它是指令而不是绑定。
<article class="content__box" v-for="data in expJson">
您还希望所有:key
元素上都带有一个v-for
。由于您的数据没有唯一标识符,因此我们可以使用索引:
<article class="content__box" v-for="(data, index) in expJson" :key="index">
此外,由于所有组件都必须具有one root element,并且v-for
可以创建可能的多个根元素,因此这仍然会产生错误。您可以将所有内容包装在div中:
<template>
<div>
<article class="content__box" v-for="(data, index) in expJson" :key="index">
{{data.text}}
<h6>{{data.text}}</h6>
<h3>{{data.color}}</h3>
<p>{{data.size}}</p>
</article>
</div>
</template>
希望这会有所帮助。
从:
中删除:v-for
冒号
const yourJson = {
"0": {
"text": "This be a square",
"color": "blue",
"size": "small"
},
"1": {
"text": "here lies a square",
"color": "red",
"size": "medium"
},
"2": {
"text": "Tharr be a squaree",
"color": "black",
"size": "large"
}
}
new Vue({
el: '#app',
data() {
return {
expJson: yourJson,
};
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<article class="content__box" v-for="data in expJson" :style="{backgroundColor: data.color}" style="color: white; padding: 10px">
{{data.text}}
<h6>{{data.text}}</h6>
<h3>{{data.color}}</h3>
<p>{{data.size}}</p>
</article>
</div>