vue.js 渲染包含 vue.js 语法的 ajax 数据

Question

Vue.js 版本为：2.x

你好。我在 vue js 中向另一个页面发送 ajax 请求，并获取它的源代码，其中包含 vue.js 语法，例如事件。将此源添加到属性并将属性添加到模板时，ajax 数据源（包含 vue.js 语法）无法呈现且无法正常工作。例如模板是：

<div id="app">
    {{{ foo }}}
</div>

和app.js是：

var app = new Vue({
    el: '#app',
    data: {
        foo: 'bar'
    },
    mounted(){
        this.$http.get('/media').then(function(response){
            data = response.body;
            Vue.set(app, 'foo', data);
        });
    },
    methods: {
        alertVideoLink: function(event){
            alert(event.target.href);
        }
    }
});

在上面的app.js代码中，ajax请求returns这段代码（即response.body）：

<a href="/media/videos" @click.pevent.self="alertVideoLink(event)">Video Link</a>

但是这个link无法渲染，无法正常工作！我正在测试渲染方法和一些有用的提示，但没有找到方法。请帮忙...谢谢

Answer 1

听起来您想使用 Async Component。

类似...

components: {
  'async-media': () => Vue.http.get('/media').then(res => ({
    template: res.body,
    methods: {
      alertVideoLink (event) {
        this.$emit('click', event)
      }
    }
  }))
}

然后在您的模板中...

<async-media @click="handleClickEventFromChildComponent" />

这是一个使用超时伪造 "load" 模板的示例

var app = new Vue({
  el: '#app',
  data: {},
  components: {
    'async-media': () => new Promise(resolve => {
      setTimeout(() => {
        resolve({
          template: '<a href="/media/videos" @click.prevent.self="alertVideoLink($event)">Video Link</a>',
          methods: {
            alertVideoLink(event) {
              this.$emit('click', event.target.href)
            }
          }          
        })
      }, 2000)
    })
  },
  methods: {
    handleClickEventFromChildComponent (href) {
      console.info('Clicked on', href)
    }
  }
});

<div id="app">
  <p>Wait 2 seconds</p>
  <async-media @click="handleClickEventFromChildComponent" />
</div>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>

Answer 2

@Phil 的回答是正确的，但在我的项目中需要更改。在这种情况下，更好的方法是：使用全局组件与本地组件 因为对于这项工作来说很简单。

vue.js 渲染包含 vue.js 语法的 ajax 数据

vue.js render ajax data that contains vue.js syntax

javascript

javascript-framework

vue.js

vuejs2