Durante a implementação do Vue.js com sematic-ui,
tenho o seguinte Jquery para abrir o modal:
$('.ui.modal').modal('show');
como fazer essa integração no Vue?
Durante a implementação do Vue.js com sematic-ui,
tenho o seguinte Jquery para abrir o modal:
$('.ui.modal').modal('show');
como fazer essa integração no Vue?
Com v-el
é possível "marcar" os elementos html para serem usados dentro de componentes.
Também é possível usar diretivas customizadas para fazer essas manipulações.
<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"
Referências:
http://vuejs.org/api/#v-el
http://vuejs.org/examples/select2.html
Ao fazer o include de jQuery via tag script o objeto jQuery estará automaticamente atrelado ao objeto window, podendo então ser utilizado normalmente dentro de um componente Vue. Basta pegar uma referência ao markup do modal utilizando v-el.
Ex.:
<div class="modal fade" tabindex="-1" role="dialog" v-el:modal>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
E no seu componente:
{
methods: {
metodoAssociadoAoCliqueUsuario () {
jQuery(this.$els.modal).modal('show')
}
}
}
Essa resposta é para aqueles que caíram aqui pelo Google ou busca no SO mesmo.
Não é indicado usar Jquery com Vue, pois ambos manipulam o DOM (no Vue temos o virtual DOM e essa é somente a resposta simples). Sempre que precisar usar algo que usa o jquery (como o materialize, apesar da versão a partir do 1.0 não utlizar mais, ou bootstrap) procure se não existe algum componente pronto para Vue. Hoje em dia (2019), é possível chamar o jquery normalmente num 'method' ou 'computed' do Vue, e executá-lo como no exemplo do Fabio Vedovelli.
{
methods: {
metodoaAssocioadoAoClique: function() {
$('#id_do_componente').modal('show');
}
}
Uma coisa importante a se lembrar é, que caso tenha necessidade de chamar um outra função dentro da chamada jquery, deve inicializar o 'this' antes, como se segue:
{
methods: {
outraFuncao: function() {
return alert("teste")
}
metodoaAssocioadoAoClique: function() {
var self = this;
$('#id_do_componente').modal({
//como opção do componente, tenho que chamar outra função
self.outraFuncao();
});
}
}
Não sou ainda um profundo conhecedor, pois ainda estou conhecendo e experimentado o Vue (e também sou novo em programação ainda).
Referências:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
DOM e o Virtual DOM do Vue
https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20
Esse é um Vue contra Jquery (mais propaganda para o Vue do que uma análise)