5
votes

I am using Vue and suddenly some of the computed css using vuetify is not working.

The way I declare an object is

personal_info : {}

and in my template, I could just do personal_info.name and other more in every v-model of text input.

I have no errors but suddenly the vuetify has a class called input-group--dirty that will elevate the label of the text input whenever it's not empty. But suddenly, it's not working. It looks like this:

enter image description here

As you can see, the text and label are overlapping.
The only thing that make it work is to set the property to null which is:

personal_info : {
  name: null
}

The problem is that I have hundreds of text inputs and I dont want to set everything to null.

Is there a simple way to set all of the object's properties to null instead of coding it 1 by 1?

2
You can just set: personal_info = {}Saurabh
@Saurabh Updated my postwobsoriano

2 Answers

10
votes

checkout this snippet

var personal_info = {
  name: 'john',
  email: '[email protected]',
  phone: 9876543210
}
console.log(JSON.stringify(personal_info)); //before looping

for (var key in personal_info ) {
  personal_info[key] = null;
}

console.log(JSON.stringify(personal_info));//after looping and setting value to 'null'
2
votes

Vilas example is ok. But in case you have nested properties and your obj looks like this you could try my snippet

var obj = {
  a: 1 ,
  b: 2,
  c: {
    e:3,
    b: {
      d:6,
      e: ['23']
    }
  }
};

var setProps = function(flat, newVal){
   for(var i in flat){
     if((typeof flat[i] === "object") && !(flat[i] instanceof Array)){
       setProps(flat[i], newVal);
       return;
     } else {
       flat[i] = newVal;
     }
  }
}
setProps(obj, null);

console.log(JSON.stringify(obj));