vue.js渲染包含vue.js语法

Vue.js版本是阿贾克斯的数据：2.x的vue.js渲染包含vue.js语法

嗨。我将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>

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

来源

2017-08-23 programmer

对我来说这听起来像一个XY问题：是否有为什么你必须从你的API端点返回一个模板，而不是一个JSON，然后你加载到一个自定义组件？ – Terry

请假设这种方式是唯一的方式！从ajax请求返回的数据包含vue语法。但我没有找到任何方式来呈现这些数据。这在某些情况下是非常有用的方法，并且非常重要。谢谢 – programmer

如果这是唯一的方法，那么你可能需要重写你的易耗品终点。当您只需传递数据并将内容交织到组件中时，传递模板字符串是没有意义的。如果你以“只是按照我所告诉你的方式编写代码”的心态来到SO，那么你就错了。 – Terry

听起来像你想要使用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/[email protected]/dist/vue.min.js"></script>

为例

来源

2017-08-24 00:32:42 Phil

谢谢，有什么方法可以让'/ media'变成动态的吗？ – programmer

@ sgh370完全取决于它来自哪里。在你的问题中，它是硬编码 – Phil

为什么你的脚本不工作？没有错误，但没有工作 – programmer

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

来源

2017-08-24 09:18:55 programmer

vue.js渲染包含vue.js语法

回答

相关问题