Javascript 如何使Vue.js组件对从数据中的类对象激发的方法作出反应？

免责声明：我是Vue.js的新手，所以这可能是我应该自己解决的愚蠢问题之一。如果是这样的话，我提前道歉

我也在尝试使用ES6，但我没有正确地使用它，所以我确信我的代码非常混乱。很抱歉

---

我使用Vue组件围绕

构建了一个简单的包装器，并形成了

等元素。我曾经处理表单提交和错误处理

根据Jeffrey的指示，我可以将

submit

按钮的

disabled

属性绑定到

Error

类上的方法

form.errors.any（）

，指组件的

data

对象中的

form

，该对象包含

form

的实例。此方法仅检查绑定到

表单

对象的

错误

对象中是否注册了任何错误，该对象在表单中的所有组件之间共享

现在，如果我提交表单并返回一个错误，按钮将被禁用。但是如果我清除错误，甚至强制触发

any（）

方法，提交按钮就不会重新启用。我已经确保没有错误，并且该方法工作正常，并且按照预期返回false（当错误被清除时）

除了确保所有其他代码都符合我的预期之外，我还尝试了搜索堆栈溢出并在谷歌上搜索类似问题的示例，但没有找到任何结果。这可能是因为我没有使用正确的搜索词

如果有人能指出我在这里明显遗漏了什么，并解释我做错了什么，那将非常有帮助

以下是相关片段：

从

toru表单提交.vue

---

我真的不确定虚拟错误数据的目的是什么，因为对我来说，这是计算属性@Hammster的一个例子，谢谢，这是一个很好的解决方法，我想我会用它来代替。我仍然不明白的是，为什么第一次调用form.errors.any（）时，禁用的值会发生变化，而不是以后？虚拟对象存在是因为Vue抱怨方法/属性不存在。但我想我现在不需要了

<template>

    <button class="" :disabled="form.errors.any()">{{ text }}</button>

</template>

<script>

import {store, eventHub} from '../../../app';

export default {

  name: 'toru-form-submit',

  props: ['text'],

  data () {
    return {

        // Building a dummy object to prevent the component
        // from complaining before the Form object is ready
        form: { 'errors': {
                any() {}
            }
        }
    }
  },

  methods: {

    // If the form-mounted event was sent from this form,
    // point this.form to the related Form object in store
    init(id) {
        if (id == this.$parent.id) {
            this.form = store[this.$parent.id]
        };
    }
  },

  created: function () {

    // Wait for the parent element to get ready
    eventHub.$on('form-mounted', this.init);
  }
};
</script>

mounted: function() {

    let elements = {};

    // Loops through all the child components of the form
    // and retrieves their name value
    for(let element in this.$children){

        if (this.$children[element].multiple === undefined || this.$children[element].multiple == 'false') {

            elements[this.$children[element].name] = '';

        } else {

            elements[this.$children[element].name] = [];

        }

    }

    // Instantiate a Form object and pass it an object
    // with all the names
    store[this.id] = new Form(elements);

    // Update the form component's data object to point
    // to the new Form object
    this.form = store[this.id];

    console.log(this.form);

    // Tell everyone that the form is mounted with a
    // Form object, and ready to go!
    eventHub.$emit('form-mounted', this.id);
  }