href blade Laravel e Vue.js

Question:

I'm listing the registered suppliers and on each line there is an edit button, in the href, I need to use encrypt and pass the id, but this id comes from Vue.js and the blade using {{ }} does not recognize the Vue.js variable, so my question is how to pass this id, follow my code.

<tbody>
    <tr v-if="fornecedores.length == 0">
        <td colspan="5" class="text-center">NENHUM FORNECEDOR CADASTRADO</td>
    </tr>
    <tr v-for="fornecedor in fornecedores" :key="fornecedor.id">
        <td>@{{fornecedor.nome}}</td>
        <td class="text-center">@{{fornecedor.telefone1}}</td>
        <td class="text-center">@{{fornecedor.telefone2 ? fornecedor.telefone2 : '-'}}</td>
        <td class="text-center">@{{fornecedor.email ? fornecedor.email : '-'}}</td>
        <td class="text-nowrap text-center">
            <a href="{!! route('admin.fornecedores.gerenciar', encrypt(fornecedor.id)) !!}" data-toggle="tooltip" data-original-title="Alterar"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a>
        </td>
    </tr>
</tbody>

Answer:

This issue occurs because the blade uses the same delimiters that Vue.js uses by default, which causes the Blade to try to interpret Vue variables and thus generate inconsistencies in its execution.

To solve this problem, vue makes available in its API the "delimiters" property, which allows you to change which delimiters will be used.

new Vue({
    el: '#app',
    data: data,
    delimiters: ["${","}"]
});

This code changes the Vue.js delimiters to ${some_thing}, so instead of {{some_thing}} you would use ${some_thing}.

Post Views: 1