Vue. js: как динамически создать ассоциативный массив, который не приводит к неопределенности? - PullRequest
Новая
       71

Vue. js: как динамически создать ассоциативный массив, который не приводит к неопределенности?

0 голосов
/ 12 марта 2020

Вот структура того, что я пытаюсь построить: 

dataArray
  ├ 20Q1234:
  │  ├──d1: 'info',
  │  ├──d2: 'more info',
  │  ├──state: 30,
  │  └──subChunk:
  │       ├──0:
  │       │  ├ part1: 'other',
  │       │  └ part2: 'more other',
  │       ├──1:
  │       │  ├ part1: 'other',
  │       │  └ part2: 'more other',
  │      ..
  │
  ├ 20Q5678:
  │  ├──d1: 'info',
  │  ├──d2: 'more info',
  │  ├──state: 20,
  │  └──subChunk:
  │       ├──0:
  │       │  ├ part1: 'other',
  │       │  └ part2: 'more other',
  │       ├──1:
  │       │  ├ part1: 'other',
  │       │  └ part2: 'more other',
  │      ..
 ..

Очевидно, что массив может быть больше двух элементов или только одного элемента. Части должны быть динамически добавлены и заполнены. Вот тестовый код, который я построил, чтобы попытаться это сделать (всего одна итерация). Я сталкиваюсь с undefined ошибками и хотел бы знать, почему. 

<script src='_js/vue.2.6.11.js'></script>

<div id="app">
  <ul v-for='(value,index) in dataArray'>
    <li v-for='(val, ind) in value'>{{ val }}</li>
  </ul>
  <hr>
  <button @click='makeItGo'>CLICK</button>  <-- when clicked, nothing happens.
</div>

<script>

var vm = new Vue ({
  el: '#app',
  data: {
    dataArray: {},
    dataID: '20Q1234',
    idData: { d1: 'info', d2: 'more info', state: 30 },
    subChunk: {
      0: {
        part1: 'other',
        part2: 'more other',
      },
      1: {
        part1: 'other',
        part2: 'more other',
      },
    },
  },

  methods: {
    makeItGo() {
      let datID = vm.dataID;    <-- i tried substituting this to attempt avoiding ERROR #1
      console.log('repID: '+datID);

      // This is what I would expect I could do to add the pieces to the array

      // vm.dataArray[vm.dataID].push(vm.idData);    <-- This gives error #1
      // vm.dataArray[vm.dataID].push(vm.subChunk);  <-- So does this

      // This kind of works, but not as expected...

      vm.dataArray[vm.dataID] = vm.idData;        <-- This works as expected. so far, so good.
      vm.dataArray[vm.dataID] += vm.subChunk;     <-- Now this... I don't understand what this did. It
                                                      creates 20Q1234: [object Object][object Object]
    }
  },
});

</script>

ОШИБКА # 1: 

[Vue warn]: Error in v-on handler: "TypeError: vm.dataArray[vm.dataID] is undefined"

(found in <Root>)
TypeError: "vm.dataArray[vm.dataID] is undefined"
    makeItGo http://localhost/vinspec/test.php:38
    invokeWithErrorHandling http://localhost/vinspec/_js/vue.2.6.11.js:1863
    invoker http://localhost/vinspec/_js/vue.2.6.11.js:2188
    _wrapper http://localhost/vinspec/_js/vue.2.6.11.js:7547
vue.2.6.11.js:1897:15

Я прочитал это и this , который повлиял на то, как я написал код для построения этой структуры. Я также прочитал это , надеясь, что это пролило бы некоторый свет. : P

Я не знаю, почему я получаю undefined ошибки. Они так явно сохранились! Эта структура должна быть построена динамически, и IRL данные извлекаются из нескольких БД, поэтому я не могу определить структуру заранее. Насколько я понял, определив dataArray, как я, я бы избежал этой проблемы. Но я не могу сказать asp, почему это не работает.

Итак. Какую концепцию мне не хватает, чтобы я мог построить эту структуру данных на лету?

...