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

Question

我运行我的 VueJS (Vue 2) 应用程序有点问题。

我有一个登录组件，它有一个名为 'error' 的子组件，它只是一个 bootstrap 警报，显示一条消息，该消息应该来自后端（通过 HTTP 请求）问题是我不太清楚如何在 HTTP 请求后动态填充此消息。

所以，重申一下，我有一个显示登录表单的父 Login 组件，该组件在 Template 中需要一个"Error" 子组件，它只是一个 bootstrap 警报。

我需要根据 "Login" 组件发出的 HTTP 请求的响应为该子组件设置消息，它是 "error" 组件的直接父级我想要要显示的消息...

你是通过道具来做的吗？如果是这样，究竟如何？这是我当前用于 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']
})

Answer 2

开始使用了，就像 Jonatas Walker 在他的 post 中所说的那样，您应该有一个 data 变量用于 parent 登录组件，那么你应该像这样将它传递给child组件

<error v-if="hasError" :errorMessage='errorMessage'></error>

:errorMessage='errorMessage' 意味着我 v-binding 'errorMessage' 数据属性进入 child 作为道具也被命名为 'errorMessage'

然后，在我的 child 组件的 Javascript 部分我可以说

    props: ['errorMessage']

然后我可以在该组件中使用 errorMessage，就好像它是在该组件中定义的普通数据属性。

{{ errorMessage }}

例如可以正常工作。

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

Passing data from HTTP request to a Sub-component VueJS

javascript

vue.js

vuejs2