@cloudyone

Render json используя v-for, в чем ошибка?

Слово file разбивает по буквам, как можно исправить? Думаю как то нужно поставить условие, если строка то не перебирать

JSON
{"menu": {
    "id": "file",
    "value": "File",
    "popup": {
      "menuitem": [
        {"value": "New", "onclick": "CreateNewDoc()"},
        {"value": "Open", "onclick": "OpenDoc()"},
        {"value": "Close", "onclick": "CloseDoc()"}
      ]
    }
}}


App.vue
<template>
  <div id="app">
    <h2>Render JSON</h2>
    <ul>
      <li 
        v-for="(value1, key1, i1) in obj" 
        :key="i1">{{ key1 }}
        <ul>
          <li 
           v-for="(value2, key2, i2) in value1" 
           :key="i2">{{ key2 }}
            <ul>
              <li 
              v-for="(value3, key3, i3) in value2" 
              :key="i3">{{ value3 }}
              
              </li>
            </ul>
           </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import dataObj from '@/assets/data';
let obj = dataObj;

export default {
  name: 'app',
  data() {
    return {
      obj: {}
    }
  },
  created() {
    // console.log('obj: ', obj)
    // console.log('this.obj: ', this.obj)
    this.obj = obj;
  }
}
</script>

<style>

</style>
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
muzikant777
@muzikant777
PHP/Vue разработчик
Если заранее структура данных неизвестна, используйте рекурсивные компоненты, как
в примере из официальной документации
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы