2

Tenho uma tabela dinâmica que atualiza de acordo com um array de objetos. Em uma das colunas dela quero colocar um dropdown com as ações possível(editar, deletar, etc). Mas o dropdown não funciona e não mostra nenhum erro no console. Esse é o botão do dropdown:

<ul :id="'dropdown'+index" class="dropdown-content">
    <li><router-link :to="{name: 'update', params: {id: conta.id}}">Editar</router-link></li>
    <li><a href="#" @click.prevent="pagarConta(conta)">Pagar</a></li>
    <li><a href="#" @click.prevent="removerConta(index, conta)">Remover</a></li>
</ul>
<a href="#" class="dropdown-button btn" :data-activates="'dropdown'+index">Ações</a>

E esse é o código que coloquei no final do meu body:

<script type="text/javascript>
$('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false, // Does not change width of dropdown to that of the activator
    hover: true, // Activate on hover
    gutter: 0, // Spacing from edge
    belowOrigin: false, // Displays dropdown below the button
    alignment: 'left' // Displays dropdown with edge aligned to the left of button
  }
);
</script>

1 Resposta 1

2

Como os dados da tabela estão sendo gerados dinamicamente, e por consequência os botões também, não podemos inicializar os dropdowns somente quando a página é carregada. Na grande maioria das vezes a tabela será gerada após o script de inicialização, então os botões não irão funcionar. Para resolver isso é bem simples. Basta tirar esse código do body e colocá-lo no componente Vue.js, no método updated. Ficará assim:

updated() {
    $(".dropdown-button").dropdown({
        constrain_width: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        belowOrigin: true, // Displays dropdown below the button
        alignment: 'right' // Displays dropdown with edge aligned to the left of button
    });
},

Caso você não queira usar ES6, mude updated() para updated: function updated()

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 .