Question

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

我有一个登录组件，它有一个名为＆＃39;错误＆＃39;的子组件。这只是一个引导警报，显示应该来自后端的消息（通过HTTP请求）问题是我不知道如何在HTTP请求后动态填充此消息。

所以，重申一下，我有一个显示登录表单的父登录组件，该组件的模板需要＆＃34;错误＆＃34; 子组件，它只是一个引导警报。

我需要根据来自＆＃34;登录＆＃34;的HTTP请求的响应为该子组件设置一条消息。组件，它是＆＃34;错误＆＃34;的直接父级。组件我希望消息显示在......

你是通过道具做到的吗？如果是这样怎么样？这是我登录组件

的当前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 在帖子中所说，你应该在父登录组件的错误消息上有一个data变量，那么你应该把它传递给像这样的子组件

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

:errorMessage='errorMessage'表示我正在绑定＆＃39; errorMessage＆＃39;作为prop的子数据属性，也称为＆＃39; errorMessage＆＃39;

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

    props: ['errorMessage']

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

{{ errorMessage }}

例如可以正常工作。

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

2 个答案: