Vue 组件和 AJAX 加载的 HTML 内容

Posted 2023-02-22

【中文标题】Vue 组件和 AJAX 加载的 HTML 内容

【英文标题】：Vue Components and AJAX loaded HTML content

【发布时间】：2017-09-15 22:19:45

【问题描述】：

我有一个 Vue 组件，它基本上是复杂 html 标记的简写。

在初始加载时，一切正常。

我正在使用 AJAX 将更多这些组件加载到页面上，问题是这个组件在使用 AJAX 加载后不想编译成 HTML 我只得到如下未渲染的 Vue 组件：

<component><slot>content</slot></component>

我查看了 Vue.compile() 和渲染函数，但不知道如何让它工作或如何重新渲染？组件。

希望这是有道理的，任何人都可以阐明我应该在这里做什么吗？

【问题讨论】：

我们可以看一些代码吗？不太清楚你在做什么。

【参考方案1】：

您应该让数据驱动视图。

换句话说，假设您有以下 html：

<div id="app">
    <component></component>

    <!-- the following ones are inserted via ajax -->
    <component></component>
    <component></component>
</div>

和js：

var app = new Vue(
  el: '#app',
  data: 
    foo: 'bar',
  
)

您可能正在发出 ajax 请求并将 <component></component> 手动插入到 html 中。这不是你应该使用 Vuejs 的方式。

让数据驱动视图的方式是创建所需的数据：

var app = new Vue(
  el: '#app',
  data: 
    foo: 'bar',
    components: [
        , //component related data
        ...
    ]
  ,

  components: 
    component,
  ,

  ajaxRequest() 
    //this should push into your components array
    // example:
    $.ajax().done(function(data) 
        this.components.push(data);
    )
  
) 

在这段代码中，我向data 添加了一个新数组(components)，它将存储我想要在我的视图中呈现的组件。当我通过 ajax 获取组件时，我将它们添加到这个数组中。现在，如果我将 html 更改为：

<div id="app">
    <component v-for="component in components" data="component">
    </component>
</div>

每当components 数组更新时，Vue 都会自动将它们添加到视图中。

【讨论】：

你是正确的，我一直在以错误的方式解决这个问题，感谢您的解释，现在应该可以让它工作了！

【参考方案2】：

使用函数“extend”和“$mount”：

axios.get(url).then((response) => 
    var MyComponent = Vue.extend(
        template: response.data
    )

    var compiled = new MyComponent().$mount()

    $('#div').append(compiled.$el)
)