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

【问题标题】：Accessing nested objects VueJS during for loop在 for 循环期间访问嵌套对象 VueJS
【发布时间】：2020-10-01 12:09:15
【问题描述】：

我正在尝试动态创建一个表单（为什么？它有 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>

希望这有点清楚。我希望form.index.classIWantToDynamicallyAdd 可以工作，但它没有，我收到以下错误：

TypeError：“_vm.form.index 未定义”。

提前致谢！

【问题讨论】：

标签： javascript css vue.js vuejs2 vue-component

【解决方案1】：

你可以这样做:class="[field.classIWantToDynamicallyAdd]"：

<div v-for="(field, index)" in form" :key="index">
     <div class="labelAndInput" :class="[field.classIWantToDynamicallyAdd]">
   ....
       <input>
     </div>
   </div>

【讨论】：

其实我也试过了。添加的类是：classIWantToDynamicallyAdd，而不是 FieldSizeSmallAF 或 FieldSizeBigAF（另外，我很遗憾使用这么长的演示名称哈哈）。我真的很茫然..
不要后悔我们在这里为您提供帮助，:class="[field.classIWantToDynamicallyAdd]" 呢？
整个渲染失败，控制台报错 = TypeError: "field is null".
它应该根据this工作或尝试:class="[form[index].classIWantToDynamicallyAdd]"
我想在你的帮助下我可能已经解决了。您对:class="[field.classIWantToDynamicallyAdd]" 的原始建议是正确的。我的问题是我在“表单”中有空值，它破坏了整个事情。当所有 200 多个字段都是对象时，它会按预期工作。感谢@everyone 的帮助......真是浪费了一天哈哈

【解决方案2】：

您可以在 data() 上定义这些类名并将其绑定到 :class

示例： https://jsfiddle.net/pguti19/hL2vamnw/

<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>

【讨论】：