Jquery .on（）Vue.js呈现原始HTML

是否有可能在Vue.js呈现的原始HTML上使用.on() jquery绑定？例如，返回的评论身体会包含一个链接（<a data-post="url">）的jQuery脚本结合：Jquery .on（）Vue.js呈现原始HTML

<div id="comments"> 
    <div v-for="comment in comments"> 
     @{{{ comment.body }}} 
    </div> 
</div>

Vue脚本：

new Vue({ 
    el: '#comments', 
    data: { 
     comments: [] 
    }, 
    ready : function() { 
     this.fetch(); 
    }, 
    methods : { 
     fetch: function() { 
      this.$http.get('api/comments', function (comments) { 
       this.$set('comments', comments); 
      }); 
     } 
    } 
});

jQuery脚本：

$('[data-post]').on('click', function(e) 
{ 
    e.preventDefault(); 
});

这是可能？评论显示正确，但似乎jQuery的绑定不生效？

任何帮助非常感谢，谢谢！

来源

2016-01-20 Steve Bauman

我认为你最好设置它，以便Vue处理链接的显示。从你的控制器返回HTML使你的视图和你的控制器比你想要的更加耦合。如果您的控制器刚刚返回'href'属性，您可以让Vue生成'a'标签，然后使用Vue方法处理点击。 – Jeff

@Jeff的确如此，但我很难将Laravel政策与客户端显示器结合起来，所以我现在将它用作创可贴。 –

绑定在body而不是data-post属性让我做到这一点：

$('body').on('click', '[data-post]', function(e) { 
    e.preventDefault(); 
}); 

// Instead of 

$('[data-post]').on('click', function(e) { 
    e.preventDefault(); 
});

从一个Ajax请求返回的原始JSON HTML和Vue的渲染似乎工作就好了。

来源

2016-01-20 16:36:57

Jquery .on（）Vue.js呈现原始HTML

回答

相关问题