如何在axios响应中包含新组件

时间:2017-12-07 18:01:30

标签: laravel-5 vue.js

我有一个带文本输入的组件。在填写输入并提交表单后,我将使用沙子axios查询,并且在响应之后我需要在错误弹出窗口中保持同一页面,或者包含带有响应数据的新组件。

我的组件

<template>
<div class="col-md-12">
    <div class="form-container">
        <form v-on:submit="prepareCollage()" class="main-form">
            <div class="form-group">
                <input type="hidden" name="_token" value="">
                <input placeholder="your text" v-model="text" name="query" type="text" class="form-control">
            </div>
            <button class="go btn btn-primary">Go!</button>
        </form>
    </div>
</div>
</template>
<script>
export default {
    data () {
        return {
            text : '',
        }
    },
    methods: {
        prepareCollage(){
            event.preventDefault();
            axios.get('/api/prepare?query='+encodeURIComponent(this.text))
                .then(function(result){

                    const result_data = result.data;

                    // if controller gave an error
                    if(result_data.error === true){

                        let error_text = result_data.error_text;
                        if(typeof(result_data.with_link) != 'undefined' && result_data.with_link.length > 0){
                            error_text += "<a href='"+result_data.with_link+"'>"+result_data.link_text+"</a>";
                        }

                        Vue.swal({
                           title: 'Error!',
                           html: error_text,
                           type: 'error',
                        })

                    }else{

                       // here i need include new component
                    }

            });
        }
    }
}
</script>

in&#34; else&#34;块我必须包含来自该组件的数据的新vue组件。我从未使用过vuejs并且很难理解这一点。

0 个答案:

没有答案