JQuery .on() Vue.js визуализирован необработанный HTML

Возможно ли использовать привязки jquery на необработанном HTML, предоставленном Vue.js? Например, возвращаемый комментарий тело будет содержать ссылку (<a data-post="url">), что скрипт JQuery связывается:JQuery .on() Vue.js визуализирован необработанный HTML

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

Вью Script:

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(); 
});

Возвращение сырец JSON HTML из Ajax запроса и предоставления его в Vue, кажется, работает нормально.

источник

2016-01-20 16:36:57

JQuery .on() Vue.js визуализирован необработанный HTML

ответ

Смежные вопросы