Question

我有一个组件

HTML：

table
                tr(is="trcom" v-for="xml in xmls" :xml="xml")

JS：

components: {
                trcom: {
                    props: ['xml'],
                    template: "<tr><td> {{ xml.query }} </td><td> downloading </td><td> downloading </td></tr>",
                    data: function(){
                        return {
                            position: "",
                        }
                    }
                }
            }

如果ajax完成，我可以发送ajax请求并替换模板吗？

最终模板：

<tr><td> {{ xml.query }} </td> <td> {{ position }} </td> ...etc... </tr>

Answer 1

鉴于我们在您的问题下面的评论中进行了讨论，我有一个建议：

1）您在单独的ajax调用之后添加和想要替换的元素应该都是它们自己的组件。

2）因为你将使用单独的子组件，所以你应该使用mounted生命周期钩子来执行你的ajax调用。

3）而不是＆＃34;替换＆＃34;组件＆＃39;模板，我甚至不确定是否可能，您可以使用条件渲染来显示初始状态与后期ajax状态。

下面是一个玩具示例，它也使用jQuery（jQuery本身并不是必需的，但为了简单起见）：

子组件

Vue.component('my-child-component', {
    template: `
        <div>
            <div v-if="initialized">
                I'm initialized! My prop value is: {{my_prop}}
            </div>
            <div v-else>
                I'm not initialized yet!
            </div>
        </div>
    `,
    props: ['my_prop'],
    data: function() {
        return {
            initialized: false
        };
    },
    mounted: function() {
        //needed because we can't use "this" to reference the vue instance in our ajax call!
        var this_vue_instance = this;

        //this jQuery ajax call will execute as soon as this component has finished rendering
        $.post('/your/target/url', {any_data: 'you might need'}, function(data) {
            this_vue.initialized = true;
        });
    }
});

根Vue实例

<script>
    $(document).ready(function() {
        var root_vue_instance = new Vue({
            el: '#app',
            data: {
                items: [0, 1, 2, 3]
            }
        });
    });
</script>

<div id="app">
    <div v-for="item in items">
        <my-child-component :my_prop="item"></my-child-component>
    </div>
</div>

以上内容非常简单，但服务器应该是实施当前问题解决方案的有用示例。

如何在渲染vue组件后发送ajax请求？

1 个答案: