2

Estou usando o materialize puro junto com o vue puro para fazer meu próprio admin template, isto é, gerei o projeto pelo vue init e coloquei no index.html os links para o css e js do materialize. O problema é que os eventos chamados pelo js do materialize não funcionam nas páginas sem antes atualizá-las. Um exemplo é o menu dropdown, só funciona se eu atualizar a página (F5), se eu acessar a página pelo router-link, esses eventos não funcionam.

Tentei iniciar as funções no mounted do component mas mesmo assim não funcionam. Como resolver esses conflitos que dá entre jquery e o dom do vuejs?

2
  • Relacionada, talvez duplicata: pt.stackoverflow.com/questions/305028
    – Costamilam
    Commented 8/07/2018 às 15:18
  • Guilherme, infelizmente não resolve a minha questão. Preciso fazer com o que o vuejs reconheça os eventos do javascript do materialize a cada mudança de página sem a necessidade de atualizar (F5). Tentei inserir a chamada do javascript no updated() do component mas sem efeito tbm.
    – Felipe Paz
    Commented 8/07/2018 às 15:24

1 Resposta 1

2

Para casos onde o precise executar um JavaScript externo, especialmente estes que manipulam a DOM, é recomendado que encapsule o mesmo em um componente.

Outro ponto importante, é que as propriedades e opções passadas para o componente devem ser reativas, neste caso, você deverá estudar o componente para estudar a melhor abordagem.

E por fim, tão importante quando iniciar o componente externo ou montar o componente Vue, é destruir o componente externo ao destruir o componente Vue.

Segue abaixo um exemplo de como se fazer um Componente para Edição e Criação de um Registro dentro de um Modal.

Vue.component('edit-or-create', {
  template: '#edit-or-create',
  props: ['show', 'nome', 'email', 'titulo'],
  data () {
    return {
      inner: {
        nome: '',
        email: ''
      }     
    }
  },
  mounted () {
    this.modal = M.Modal.init(this.$refs.modal);
    this.checkShow();
  },
  beforeDestroy () {
    this.modal.destroy()
  },
  watch: {
    show () {
      this.checkShow();
    }
  },
  methods: {
    checkShow () {
      if (this.show) {
        this.inner.nome = this.nome
        this.inner.email = this.email
        this.modal.open()
      } else {
        this.modal.close()
      }
    },
    cancelar () {
      this.$emit('update:show', false);
    },
    salvar () {
      this.$emit('update:nome', this.inner.nome);
      this.$emit('update:email', this.inner.email);
      this.$emit('update:show', false);
      this.$emit('salvar')
    }
  }
});

new Vue({
  el: '#app',
  data () {
    return {
      create: { show: false, nome: '', email: '' },
      contatos: [{
        edit: false, nome: 'Tobias Mesquita', email: '[email protected]'
      }]
    }
  },
  methods: {
    created () {
      this.contatos.push({ edit: false, nome: this.create.nome, email: this.create.email })
    },
    apagar (contato) {
      var index = this.contatos.indexOf(contato)
      this.contatos.splice(index, 1)
    }
  }
})
body {
  padding: 5px;
}
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.js"></script>

<div id="app">
  <button class="waves-effect waves-light btn-small" @click="create.show = true">
    <i class="material-icons left">note_add</i>Novo
  </button>
  <edit-or-create 
    titulo="Novo Contato"
    :show.sync="create.show" 
    :nome.sync="create.nome" 
    :email.sync="create.email"
    @salvar="created">
  </edit-or-create>
  <table>
    <thead>
      <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Editar</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(contato, indice) in contatos">
        <td>{{contato.nome}}</td>
        <td>{{contato.email}}</td>
        <td>
          <button class="btn waves-effect waves-light btn-small" @click="contato.edit = true">
            <i class="material-icons left">edit</i>Editar
          </button>
          <button class="btn waves-effect waves-light btn-small" @click="apagar(contato)">
            <i class="material-icons left">delete</i>Delete
          </button>
          <edit-or-create 
            :titulo="'Editar ' + indice"
            :show.sync="contato.edit" 
            :nome.sync="contato.nome" 
            :email.sync="contato.email">
          </edit-or-create>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/x-template" id="edit-or-create">
  <div ref="modal" class="modal">
    <div class="modal-content">
      <h4>{{titulo}}</h4>
      <div>
        <div class="row">
          <div class="input-field col s12">
            <input id="first_name" type="text" v-model="inner.nome">
            <label for="first_name">Nome</label>
          </div>
          <div class="input-field col s12">
            <input id="last_name" type="text" v-model="inner.email">
            <label for="last_name">Email</label>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn waves-effect waves-light btn-small" @click="cancelar">
        Cancelar
      </button>
      <button class="btn waves-effect waves-light btn-small" @click="salvar">
        Salvar
      </button>
    </div>
  </div>
</script>

Porém, o mais recomendado seria implementar um componente exclusivo para o modal, e usar um slot para o conteúdo do mesmo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .