How to use materialize components with Vue.js?

Question

I have a dynamic table that updates according to an object array. In one of her columns I want to put a dropdown with the possible actions (edit, delete, etc). But the dropdown does not work and shows no error on the console. This is the dropdown button:

<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>

And that’s the code I put on the end of my 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>

Answer 1

As the table data is being generated dynamically, and consequently the buttons as well, we cannot initialize the dropdowns only when the page is loaded. Most of the time the table will be generated after the startup script, so the buttons will not work. To solve this is very simple. Just take this code from the body and put it in the Vue.js component, in the method updated. Will stay like this:

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

If you don’t want to use ES6, change updated() for updated: function updated()