VueJS 遍历对象中的数组？

Posted 2023-02-22

【中文标题】VueJS 遍历对象中的数组？

【英文标题】：VueJS iterate through the arrays in an object?

【发布时间】：2020-08-21 01:25:03

【问题描述】：

如何遍历对象中的数组？ 我希望达到的是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>

我在任何地方都找不到关于这个特定问题的任何信息，所以我想我做错了，我不应该在对象内创建一个数组，如果是这种情况，请向我解释我应该如何构建我的正确的值。

我对 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】：

您的第二个 v-for 循环遍历整个 options 对象，但您很可能希望循环遍历 options[id]。

尝试将第二个v-for 更新为此

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