包含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请求返回以下代码(即response.body)：

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

但是这个链接不能呈现并且不能正常工作！我正在测试呈现方法和一些有用的提示，但是找不到。请帮帮我..。谢谢

Answer 1

听起来你想要使用异步组件。

就像..。

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

然后在你的模板里。

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

下面是一个使用超时来伪造“加载”模板的示例

​

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

@菲尔的答案是正确的，但在我的项目中需要改变。在本例中，更好的方法是：使用全局组件与本地组件，因为对于这项工作来说很简单。