Question

我有一个errors对象：

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

如何将errors对象内的所有项目的值设置为''（只需清除它们）？
我可以清除data对象内的所有项目 Object.assign(this.$data, this.$options.data.call(this));
但
Object.assign(this.$data.errors, this.$options.data.call(this));
或
Object.assign(this.$data.errors, {});
或
this.errors = ''
或
this.$set(this.$data.errors, '');
不起作用。

更新1
这个用于清除errors.login：
Object.assign(this.$data.errors.login, this.$options.data.call(this)); 我想我可以将变量传递给clear(obj)并使用它 Object.assign(this.$data.errors.obj, this.$options.data.call(this));
但无论如何看看如何清除所有errors对象。

更新2
Object.assign(this.$data.errors.register, this.$options.data);
仅在email内清除password和errors.register - 无法获得该逻辑。

Answer 1

您可以通过迭代对象的所有键并按对象值递归来采用迭代和递归方法。

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

Answer 2

解决。

实际上不需要做一些递归的东西或其他什么。只是：

在您的数据组件中errors声明null
声明resetErrors()方法，根据您的需要实现this.errors，并在您的组件为created()时调用该函数
只要您想重置/清除错误对象，请致电this.resetErrors()。

＆＃13;

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();
  }
})

＆＃13;

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

＆＃13;

Answer 3

[AllowAnonymous]

将对象内的所有元素分配给空字符串

3 个答案: