javascript - 动态访问 Vue 数据

Question

我目前正在使用 Node.js 和 Vue.js 为个人项目构建登录页面，但在 vue 实例之间访问数据时遇到一些问题。

我目前正在使用它，以便如果 bool 数据值为 true，文本输入框将分配一个 error 类。我有两个单独的 Vue 用于字段，用户名输入和电子邮件输入:

var user = new Vue({

    el: '#usr-field',
    data: {
        hasError: messages.inUse.show || messages.tooShort.show
    }

});



var email = new Vue({

    el: '#email-field', 
    data: {
        hasError: messages.idLength.show
    }

});

在同一个文件中，Vuejs 会显示错误消息(如果有的话):

var messages = new Vue({

    el: '#errors', 
    data: {
        showErrors: false, 
        inUse: {
            show: false,
            text: 'The username you chose is already in use'
        }, 
        tooShort: {
            show: false,
            text: 'The username you chose is too short (4 character minimum)'
        }, 
        idLength: {
            show: false,
            text: 'The email you provided does not match the standard 7 character format'
        }
    },
    methods: {
        resetErrors: function() {
            if (this.showErrors) {
                this.showErrors = false;
                this.idLength.show = false;
                this.inUse.show = false;
                this.tooShort.show = false;
            }
        },
    }

});

我当前尝试动态访问 messages Vue 的值的方式除了加载之外不起作用。有没有办法让 user 和 email Vue 的 hasError 数据根据 messages Vue 动态更改数据？

Answer 1

首先，仅创建一个 Vue 实例。

使用包含登录表单输入元素的元素。对于前。一个带有 id login 的 div 包装器。

new Vue({
  el: '#login', 
  data: {
      showErrors: false, 
      inUse: {
          show: false,
          text: 'The username you chose is already in use'
      }, 
      tooShort: {
        show: false,
        text: 'The username you chose is too short (4 character minimum)'
      }, 
      idLength: {
        show: false,
        text: 'The email you provided does not match the standard 7 character format'
      }
  },
  methods: {
    resetErrors: function() {
        if (this.showErrors) {
            this.showErrors = false;
            this.idLength.show = false;
            this.inUse.show = false;
            this.tooShort.show = false;
        }
    },
  }
});

然后在 HTML 中，使用 v-bind:class 在输入中显示或隐藏类 error，如下所示:

<input id="usr-field" :class="{'error': messages.inUse.show || messages.tooShort.show}" ...

您的电子邮件字段的想法相同:

<input id="email-field" :class="{'error': messages.idLength.show}" ...

如果稍后您觉得需要隔离逻辑，您可能需要研究组件。