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重复无法按照我认为的方式工作。

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>

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

1 个答案: