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

Posted 2023-02-22

【中文标题】vue.js 渲染包含 vue.js 语法的 ajax 数据

【英文标题】：vue.js render ajax data that contains vue.js syntax

【发布时间】：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，但在我的项目中这是唯一的方法。谢谢你的评论

有人帮不上忙吗？

【参考方案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 的回答是正确的，但在我的项目中需要更改。在这种情况下，更好的方法是：使用全局组件与本地组件，因为这项工作很简单。