Не отображается список во Vue.js

100
18 августа 2018, 16:10

Всем привет. Столкнулся с такой проблемкой: есть методы, которые берут из json-файла данные, значение ключа кладут в один массив, а значение значения(значения значения) - в другой, все это возвращается в data и из него выводится списком в компонент. Код следующий:

<template>
  <ul class="card__list">
    <li
    class="card__item"
    v-for="item in cardItems">
      <div class="card__key">{{ item.keysArr }}</div>
      <div class="card__value">{{ item.valArr }}</div>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'CardList',
  data: function() {
    return {
      cardItems: {
        keysArr: [],
        valArr: []
      }
    }
  },
  methods: {
    getKeys: function(obj) {
      var size = 0, key;
      for (key in obj) {
        keysArr[size] = key;
        if(obj.hasOwnProperty(key)) size++;
      }
      return keysArr;
    },
    getValues: function(obj) {
      var size = 0, key;
      for (key in obj) {
        valArr[size] = obj[key];
        if(obj.hasOwnProperty(key)) size++;
      }
      return valArr;
    },
    loadJSON: function(callback) {
      var xobj = new XMLHttpRequest();
      xobj.open('GET', 'thousand1.json', true);
      xobj.onreadystatechange = function() {
        if(xobj.readyState == 4 && xobj.status == '200') {
          callback(xobj.responseText);
        }
      };
      xobj.send(null);
    },
    init: function() {
      loadJSON(function(response) {
        var items = JSON.parse(response);
        this.cardList = items
        getKeys(items);
        getValues(items);
      })
    }
  }
}
</script>

Как примерно выглядит мой json:

{
  "a" : "неопределенный артикль",
  "the" : "определенный артикль",
  "be" : "быть",
  "of" : "предлог родительного падежа",
  "and" : "и",
  "in" : "в; через (о времени)",
  "to" : "к; в",
  "have" : "иметь",
  "it" : "это; он, она, оно (для неодуш.сущ.)",
  "for" : "для; ибо",
  "I" : "я",
  "that" : "тот; что",
  "you" : "ты, вы",
  ...
  ...
  ...
}

Подскажите, куда смотреть?

Answer 1

Не увидел у вас самих функций добавления элементов в объект.

Исправьте метод init

На

init: function() {
  loadJSON(function(response) {
    var items = JSON.parse(response);
    this.cardList = items //Данная переменная должна быть объявлена внутри data, иначе она не используется
    this.cardItems.keysArr = getKeys(items);
    this.cardItems.valArr = getValues(items);
  }, this)
}
READ ALSO
Блокировка js антивирусами

Блокировка js антивирусами

Пишу сайтЗаметил что касперский у пользователей блокирует файлы js, которые не несут угрозы

118
Как высчитать номера в цикле?

Как высчитать номера в цикле?

Загружаю картинки из папки, var folder = "assets/img/slider/";

90
Почему не передается json объект на сервер с node.js?

Почему не передается json объект на сервер с node.js?

Коллеги, добрый деньПодскажите, в чем может быть проблема? Есть сервак во вне, у него есть директория /user Я хочу скормить ему json объект, а потом...

99
Как добавить удалить класс при скролле в нужном месте?

Как добавить удалить класс при скролле в нужном месте?

В разметке есть три блока, которые при скролле должны менятьсяТ

119