如何在vue.js中使用v-html中的v-html绑定来自ajax调用的字符串返回？

Question

我想将v-html与从v-for中的ajax调用返回的字符串绑定。

<div v-for="row in data">
  <div v-html="getHtml[row.id]"></div>

//fun
getHtml(i){
 this.$http.get('.....').then((data) => return data.html;)
}

Answer 1

这将是这样的：

  

@Template

<div id="app">
    <div v-html="newContent"></div>
</div>

  

@Vue实例

var vm = new Vue({
    el: "#app"
    data: {
        newContent: ''
    },
    mounted: function() {
        var that = this;
        this.$http.get(ENDPOINT)
            .then(function(data) { that.newContent = data })
            .catch(function(error) { console.log(error); });
    }
});

发生了什么事？

在此示例中，我们使用newContent指令将数据属性v-html绑定到div。 这意味着，每次属性更改时，div内容都会更新。

组件获得mounted后，它将触发一个AJAX请求.then()，它会将响应数据分配给newContent属性，正如我们之前看到的那样，会自动更新视图，因为它的反应性。