Vue JS conditionnelle rendu

Question

Je dispose d'un fichier Icon.vue qui se présente comme suit:

<template> 
    <div class="book-item Icon--container Icon--{{active}}"> 
     <a href="{{slug}}"> 
      <img v-bind:src="path" transition="fadein" class="img-responsive"/> 
     </a> 
     <template v-if="name"> 
      <div class="info"> 
      <h4>{{name}}</h4> 
      </div> 
     </template> 
     <template v-if="remove"> 
      <div class="delete"> 
      <a href="#"> 
       <i class="fa fa-trash"></i> 
      </a> 
      </div> 
     </template> 
     <template v-if="edit"> 
      <div class="edit"> 
      <a href="#" class="cta purple">Edit</a> 
      </div> 
     </template> 
     <template v-if="view"> 
      <div class="view"> 
      <a href="#" class="cta purple">View</a> 
      </div> 
     </template> 
    </div> 
</template> 

<script> 
export default 
{ 

    props:{ 
    info: {}, 
    remove: {}, 
    edit: {}, 
    view: {}, 
    active: {default:'show'}, 
    path: {default:''}, 
    name: {default:'Icon name'}, 
    slug: {default:'#'}, 
    }, 
    data: function() { 
    return {} 
    }, 
    methods:{}, 
    events: {}, 
    ready:function(e) 
    { 

    }, 
    created:function(e) 
    { 

    } 

}; 
</script> 

sur availble également pastebin

Comme vous pouvez le voir, il y a une certaine logique là-dedans pour ce qui suit:

• nom
• supprimer
• modifier
• vue

J'utilise Laravel et passer des variables de mon modèle de lame, mais comment puis-je régler le cas à true dans le modèle de lame.

Par exemple:

<icon path="{{url('img/admin/add.png') }}" name="" remove="remove"></icon> 

ne pas ajouter la logique de suppression. Comment puis-je faire cela, si possible?

Merci

Answer 1

Pour ajouter une logique à partir d'un premier composant, vous devez lier un événement à un élément de ce composant, puis tirer parti de l'utilisation de l'intérieur methods (https://vuejs.org/guide/events.html).

Le modèle devrait ressembler à:

<icon 
path="{{url('img/admin/add.png') }}" 
name="" 
v-on:click="remove"></icon> 

Et dans le script:

methods: { 
    remove: function() { 
    // Do something to remove 
    } 
} 

Bonne chance!