How to use materialize components with vue.js?

Navigation
1

I have a PivotTable that updates according to an array of objects. In one of the columns of it I want to put a dropdown with the possible actions (edit, delete, etc). But the dropdown does not work and shows no error in 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 this is the code I put at 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>
    
asked by anonymous 08.12.2016 / 16:35

1 answer

1

As the table data is being generated dynamically, and therefore the buttons too, we can not initialize the dropdowns only when the page loads. In most cases 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 place it in the Vue.js component, in the updated method. It will look 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 do not want to use ES6, change updated() to    updated: function updated()

    
08.12.2016 / 16:35
Problem deleting list with recursion Manage urls in a system