@vue.cli 4.2.3 vue组件中的json数组

Question

下面是我的json代码

"acont": {
"0": {
"first": "apple",
"lists": ["red", "round", "big"]
}
}

这是我的.vue代码

<div v-for="(data, indeex) in jsonHero" :key="indeex">
<span>{{data.first}}</span>
<ul>
try:1: <li v-repeat="lists">{{$value}}</li>
try:2: <li v-repeat="data.lists">{{$value}}</li>
try:3: <li v-repeat="lists">{{value}}</li>
try:4: <li v-repeat="data.lists">{{value}}</li>
</ul>
</div>
<script>
import json from "@/components/json/english.json";
export default {
name: "Aside",
data() {
return {
jsonHero: json.acont,
};
}
};

该列表不重复。我认为可能是逻辑错误，或者v-repeat没有按照我认为的方式工作。

Answer 1

如果我的理解是正确的，你想要这样的东西：

new Vue({
el: "#app",
data: {
jsonHero: {
"0": {
first: "apple",
lists: ["red", "round", "big"],
},
"1": {
first: "mango",
lists: ["yes", "square", "small"],
},
},
},
methods: {
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(data, indeex) in jsonHero" :key="indeex">
<h2>{{ data.first }}</h2>
<ul>
<li v-for="(item, index) in data.lists" :key="index">{{ item }}</li>
</ul>
</div>
</div>