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

【问题标题】：vue.js render ajax data that contains vue.js syntaxvue.js 渲染包含 vue.js 语法的 ajax 数据
【发布时间】：2018-02-01 14:46:03
【问题描述】：

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>

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

【问题讨论】：

对我来说听起来像是一个 XY 问题：这就是为什么你必须从你的 API 端点返回一个模板，而不是你然后加载到自定义组件中的 JSON？
请假设这是唯一的方法！从 ajax 请求返回的数据包含 vue 语法。但我没有找到任何方法来呈现这些数据。在某些情况下，这是非常有用的方法，并且对于解决非常重要。谢谢
如果这是唯一的方法，那么您可能需要重写您的消耗性端点。当您可以简单地传递数据并将该内容交织到组件中时，传递模板字符串是没有意义的。如果你带着“按照我告诉你的那样编写代码”的心态来到 SO，那么你就走错了论坛。
是的，我知道 api 端点应该是 json，但在我的项目中这是唯一的方法。谢谢你的评论
有人帮不上忙吗？

标签： javascript vue.js vuejs2 javascript-framework

【解决方案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" />

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

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>

【讨论】：

谢谢，有什么方法可以让 '/media' 变成动态的？
@sgh370 这完全取决于它首先来自哪里。在您的问题中，它是硬编码的
为什么你的脚本不起作用？没有错误但没有工作
@sgh370 您是否在您的Vue 实例中实现了handleClickEventFromChildComponent 方法？
是的，我想操作从 ajax 返回的数据。有什么想法吗？例如替换响应中的一些字符串

【解决方案2】：

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

【讨论】：