VueJS перебирать массивы в объекте? - PullRequest
Новая
       5

VueJS перебирать массивы в объекте?

0 голосов
/ 06 мая 2020

Как я могу перебирать массивы в объекте? То, что мне нужно sh, - это this

Это мой код, очень простой, в настоящее время он выводит индексы в правильном порядке, но мне нужны значения массива ! 

<template>
  <div>
    <form class="production">
      <div v-for="(id, index) in ids" :key="index" class="form-group">
        <label class="control-label" v-bind:for="ids[index]">{{ labels[index] }}</label>
        <div class="">
          <select v-bind:id="ids[index]" v-bind:name="ids[index]" class="form-control">
            <option v-for="(option, prop, val) in options" :key="val" v-bind:value="option">{{[index]}}{{[val]}}</option>
          </select>
        </div>
      </div>
    </form>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "Production",
  data() {
    return {
      labels: ["Menge", "Lieferland", "Verpackung"],
      ids: ["amount", "country", "packing"],
      options: {
        amount: ["100", "300", "500"],
        country: ["Detuschland", "Österreich", "Schweiz"],
        packing: ["Option1", "Option2", "Option3"]
      }
    };
  }
};
</script>

Я не смог найти нигде об этой конкретной c проблеме, поэтому я полагаю, что делаю это неправильно и не должен создавать массив внутри объекта, если это так пожалуйста, объясните мне, как еще я должен правильно структурировать свои значения.

Я новичок в vueJS и не имею большого опыта работы с javascript, хотя я мог бы получить правильный результат в обычном JavaScript с чем-то вроде этого 

for (var x = 0; x < Object.values(options).length; x++) {
    for (var i = 0; i < Object.values(options)[x].length; i++) {
        console.log(Object.values(options)[x][i])
    }
}

VueJS кажется немного сложнее, чем это

1 Ответ

0 голосов
/ 06 мая 2020

Ваш второй v-for проходит по всему options объекту, но, скорее всего, вы хотите l oop over options[id].

Попробуйте обновить второй v-for до этого 

<option v-for="(option, prop, val) in options[id]" :key="val" v-bind:value="option">{{[index]}}{{[val]}}</option>
...