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

Posted 2023-02-23

【中文标题】在 for 循环期间访问嵌套对象 VueJS

【英文标题】：Accessing nested objects VueJS during for loop

【发布时间】：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 未定义”。

提前致谢！

【参考方案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/

更多帮助： https://michaelnthiessen.com/dynamically-add-class-name/

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