javascript - 将数据从 HTTP 请求传递到子组件 VueJS

Question

我的 VueJS (Vue 2) 应用程序遇到了一些问题。

我有一个登录组件，它有一个名为“错误”的子组件，它只是一个引导警报，显示一条消息，该消息应该来自后端(通过 HTTP 请求)问题是我不太清楚我如何在 HTTP 请求后动态填充此消息。

因此，重申一下，我有一个显示登录表单的父级 Login 组件，该组件在其Template 中需要一个“错误” 子组件，它只是一个引导警报。

我需要根据“登录”组件发出的 HTTP 请求的响应为该子组件设置消息，“登录”组件是我希望消息显示在“错误”组件的直接父级。 .

你是通过 Prop 来做到这一点的吗？如果是这样，究竟如何？这是我当前用于 Login 组件的 HTML 模板

<template>
    <div class="container-fluid">
        <!-- Error display component -->
        <error v-if="hasError" v-bind:errorMessage='errorMessage'></error>
        ...Login form HTML....
</template>

<script>
    import Error from './partials/Error.vue';

    export default {
        mounted() {
            this.usernameInput  = document.getElementById('email')
            this.passwordInput  = document.getElementById('password')
            this.submitButton   = document.getElementById('submitBtn')
            this.errorContainer = document.getElementById('errorContainer') 
        },
        methods: {
            submitForm: (e) => {
                e.preventDefault();

            }
        },
        data() {
            return {
                usernameInput: undefined,
                passwordInput: undefined,
                submitButton: undefined,
                errorContainer: undefined,
                errorMessage: null,
                hasError: false,
                email: null,
                password: null
            }
        },
        components: {
            'error': Error
        }
    }   
</script>

对于错误组件

<template>
    <div class="alert alert-danger fade in">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Error!</strong> {{ errorMessage }}
    </div>
</template>

<script>
    export default {
        props: ['']
    }
</script>

Answer 1

更新:

适应您的代码:

methods: {
  submitForm(e) { // dont use fat arrow to not loose context
    e.preventDefault();

    if (some_error) {
      this.hasError = true;
      this.errorMessage = 'Please fix ....';
    }
  }
}

和错误组件:

export default {
    props: ['errorMessage']
}

---

你会做这样的事情:

Vue.component('login', {
  template: '<div>...</div>',
  data() {
    return { message: '' };
  },
  methods: {
    request() {
      // make a request and then set this.message
    }
  }
})

Vue.component('error', {
  template: '<div>{{ message }}</div>',
  props: ['message']
})