Question

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

我目前正在使用它，以便如果布尔数据值为true，则文本输入框将为其分配select t1.burung, count(t2.id_burung) as burungCnt from tb_burung t1 left join tb_data t2 on t1.id_burung = t2.id_burung group by t1.id_burung, t1.burung类。我有两个单独的字段Vues，一个用户名输入和电子邮件输入：

error

在同一个文件中就是这个错误信息的Vuejs，如果有的话会出现：

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
    }

});

我目前尝试动态访问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; } }, } }); Vue值的方式除了加载外无法正常工作。有没有办法让messages和user Vue email数据根据hasError Vue数据动态变化？

Answer 1

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

使用包含登录表单输入元素的元素。对于前者一个标识为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}" ...

如果以后您觉得需要隔离逻辑，您可能需要查看组件。

动态访问Vue数据

1 个答案: