Accessing nested objects VueJS during for loop

Question

I am trying to dynamically create a form (why? It's 200+ fields long and I am not permitted to modify it). The entire app is in the VueJs environment.

The problem I'm having is that each field requires different things (obviously). I'm trying to add attributes dynamically to each field, which would allow me to render the entire form dynamically, rather than hard coding a 200+ field form. So in my stupidity I'm taking more time trying to solve this problem than it would take to just hard code the form. Oh well...

Here's a specific (simplified) example of what I want to do...

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

Now ultimately I want to get the value of "classIWantToDynamicallyAdd" and :class="put it here"

The HTML looks like this:

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

Hopefully that's somewhat clear. I expected form.index.classIWantToDynamicallyAdd to work, but it did not, i got the following error:

TypeError: "_vm.form.index is undefined".

Thanks in advance!

Boussadjra Brahim · Accepted Answer · 2020-06-11 18:55:44Z

1

You could do :class="[field.classIWantToDynamicallyAdd]" :

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

edited Jun 11, 2020 at 18:55

answered Jun 11, 2020 at 18:45

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MapleDanish Over a year ago

I tried this as well, actually. The class added is: classIWantToDynamicallyAdd, rather than FieldSizeSmallAF or FieldSizeBigAF (also, I'm regretting using such long demo names lol). I'm really at a loss..

Boussadjra Brahim Over a year ago

don't regret we are here to help you, what about :class="[field.classIWantToDynamicallyAdd]"?

MapleDanish Over a year ago

The whole thing fails to render and console error = TypeError: "field is null".

Boussadjra Brahim Over a year ago

it should work according to this or try :class="[form[index].classIWantToDynamicallyAdd]"

MapleDanish Over a year ago

I think I may have solved it with your help. Your original suggestion of :class="[field.classIWantToDynamicallyAdd]" was correct. My problem was that I had null values in 'form' and it broke the whole thing. When all 200+ fields are objects it works as expected. Thanks @everyone for the help... What a wasted day lol

|

Pablo Gutiérrez · Accepted Answer · 2020-06-11 19:15:36Z

0

You could define those class names on data() and just bind it to :class

Example: https://jsfiddle.net/pguti19/hL2vamnw/

More help: 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>

edited Jun 11, 2020 at 19:15

answered Jun 11, 2020 at 19:10

Pablo Gutiérrez

296 bronze badges

Collectives™ on Stack Overflow

Accessing nested objects VueJS during for loop

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related