Javascript 在for循环期间访问嵌套对象VueJS

我正在尝试动态创建一个表单（为什么？它有200多个字段，我不允许修改它）。整个应用程序都在VueJs环境中

我遇到的问题是，每个领域需要不同的东西（显然）。我正在尝试向每个字段动态添加属性，这将允许我动态呈现整个表单，而不是硬编码200多个字段的表单。因此，在我的愚蠢中，我花了比硬编码表单更多的时间来解决这个问题。哦，好吧

下面是我想做的一个具体（简化）例子

    data() {
         return {
           form: {
             input1: {value: "", classIWantToDynamicallyAdd: "FieldSizeSmallAF"},
             input2: {value: "", classIWantToDynamicallyAdd: "FieldSizeBigAF"},
             //Repeat 200 times
      }
     }
    }

现在，我最终想要得到“classIWantToDynamicallyAdd”和：class=“放在这里”

HTML如下所示：

<template>
 <div>
   <div v-for="(field, index)" in form" :key="index">
     <div class="labelAndInput" :class="**I don't know what to do here**">
       <label>index</label> // Successfully outputs: "input1", "input2", etc...
       <input>
     </div>
   </div>
 </div>
</template>

您可以执行
：class=“[field.classiswanttodynamicallyadd]”
：

您可以在data（）上定义这些类名，并将其绑定到：class

例如：

更多帮助：


形式：
使用{field.class}}class
新Vue({
el:“应用程序”，
数据：{
表格：{
input1:{value:，类：“红色主题”}，
input2:{value:，类：“蓝色主题”}，
input3:{value:，类：“绿色主题”}
},
主题一：“蓝色主题”，
主题二：“红色主题”，
主题3：“绿色主题”
},
方法：{
切换：功能（todo）{
todo.done=！todo.done
}
}
})
实际上，我也试过这个。添加的类是：ClassWantTodynamicallyadd，而不是FieldSizeSmallAF或FieldSizeBigAF（同样，我很后悔使用这么长的演示名称lol）。我真的不知所措。不要后悔我们是来帮助你的，那
：class=“[field.classiswanttodynamicallyadd]”呢
？整个事情都无法呈现，控制台错误=TypeError:“field为null”。它应该根据或尝试
：class=“[form[index].classiswanttodynamicallyadd]”工作
我想在你的帮助下我可能已经解决了这个问题。您最初对
：class=“[field.classiswanttodynamicallyadd]”的建议是正确的。我的问题是“form”中有空值，这破坏了整个过程。当所有200多个字段都是对象时，它将按预期工作。谢谢大家的帮助。。。多么浪费的一天啊，哈哈
<div v-for="(field, index)" in form" :key="index">
     <div class="labelAndInput" :class="[field.classIWantToDynamicallyAdd]">
   ....
       <input>
     </div>
   </div>

<div id="app">
  <h1>
  Forms:
  </h1>
  <div v-for="(field, index) in form" :key="index">
    <span :class="field.class">
      Using {{field.class}} class  
    </span>
  </div>
</div>

<script>
new Vue({
  el: "#app",
  data: {
      form: {
         input1: {value: "", class: "red-theme"},
         input2: {value: "", class: "blue-theme"},
         input3: {value: "", class: "green-theme"}
      },
      theme1: 'blue-theme',
      theme2: 'red-theme',
      theme3: 'green-theme'
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})
</script>