0

I have an errors object:

data() {
    return {
        ...
        errors: {
            login: {
                email: '',
                password: '',
            },
            register: {
                name: '',
                email: '',
                password: '',
                password_confirmation: '',
            },
        }
    }
},

How can I set the value of all items inside errors object to '' (just clear them)?
I can clear all items inside data object with
Object.assign(this.$data, this.$options.data.call(this));
But
Object.assign(this.$data.errors, this.$options.data.call(this));
or
Object.assign(this.$data.errors, {});
or
this.errors = ''
or
this.$set(this.$data.errors, '');
doesn't work.

Update 1
This one works for clearing errors.login:
Object.assign(this.$data.errors.login, this.$options.data.call(this)); I think I cann pass a variable to clear(obj) and use it
Object.assign(this.$data.errors.obj, this.$options.data.call(this));
but anyway looking how to clear all errors object.

Update 2
Object.assign(this.$data.errors.register, this.$options.data);
clears only email and password inside errors.register - can't get that logic.

Improve this question
3
  • Do you want the login object to be set to the empty string (e.g, it wouldn't be an object any more, but an empty string), or the values with the login object to be set to the empty string? If the latter, it's simple recursion. Commented Feb 24, 2018 at 13:10
  • @DaveNewton values inside login and register objects to be set to the empty string Commented Feb 24, 2018 at 13:11
  • So simple recursion then. Some JS libs have convenience methods for this. Commented Feb 24, 2018 at 13:14

3 Answers 3

Reset to default
1

You could take an iterative and recursive approach by iterating all keys of the object and recursive by object values.

function empty(object) {
    Object.keys(object).forEach(function (k){
        if (object[k] && typeof object[k] === 'object') {
            return empty(object[k]);
        }
        object[k] = '';
    });
}

var object = { errors: { login: { foo: 43, bar: 23 }, register: { baz: 'aaa', inner: { key: 'value' } } } };

empty(object);

console.log(object);
.as-console-wrapper { max-height: 100% !important; top: 0; }

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

2 Comments

Actually, I reading the question again, I'm not clear what the OP wants.
@Andy I've updated my question, I hope it is more understandable now.
1

Solved.

In fact no need to do some recursive stuff or whatever. Just:

  • Declare errors at null in your data's component
  • Declare a resetErrors() method who instanciate this.errors like you want, and call that function when your component is created()
  • Call this.resetErrors() whenever you want to reset/clear your errors object.

const app = new Vue({
  el: '#app',
  data() {
    return {
      errors: null
    }
  },

  methods: {

    resetErrors() {
      this.errors = {
        login: {
          email: '',
          password: '',
        },
        register: {
          name: '',
          email: '',
          password: '',
          password_confirmation: '',
        }
      }
    }
  },

  created() {
    this.resetErrors();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <button @click="resetErrors">
    Clear errors
  </button>

  <pre>
    {{ errors }}
  </pre>
</div>

Improve this answer

3 Comments

I get TypeError: Cannot read property 'email' of undefined. I guess this errors isn't connected with your JSFiddle example...
Please place the answer here, rather than linking to it -- linkrot would make this answer useless to future users. (SO has the same functionality as jsfiddle; click the document-with-angle-bracket icon in the toolbar above the text field.)
@DanielBeck I've edited my answer - no more JsFiddle but SO code snippet
0 
 const result = data();
 for(const key in result.errors)
   result.errors[key] = "";
Improve this answer

1 Comment

Wouldn't that set "login" etc to the empty string, not the key values in the "login" object?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.