href Laravel and Vue.js

Asked

Viewed 263 times

3

I am doing the list of registered phonesetters and in each line there is an edit button, in href, I need to use Encrypt and pass id, but this id comes from Vue.js and Blade with the use of {{ }} does not recognize the Vue.js variable, then 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>
laravel laravel-5 vue.js laravel-blade

  • I want to help but I don’t know the Laravel-Lade. What are the @? and {!!? You can ask the question the code that reaches the browser?

1 answer

0

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

To solve this problem, Vue provides API the "delimiters" property, which allows changing which delimiters will be used. 

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

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

Another related discussion: https://stackoverflow.com/questions/33628558/vue-js-change-tags

Browser other questions tagged laravel laravel-5 vue.js laravel-blade

You are not signed in. Login or sign up in order to post.