Vue JS Условный Rendering

Question

У меня есть Icon.vue файл, который выглядит следующим образом:

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

Также экранном на pastebin

Как вы можете видеть, Существует некоторая логика там следующее:

• имя
• удалить
• редактировать
• вид

Я использую Laravel и передачи переменных из моего шаблона лезвия, Но как я установил, если истина в шаблоне лезвия.

Например:

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

Не добавить логику удалить. Как мне это сделать, если возможно?

Благодаря

Answer 1

Чтобы добавить логику из компонента сначала нужно привязать событие к элементу из этого компонента, а затем использовать использование methods внутри него (https://vuejs.org/guide/events.html).

Шаблон должен выглядеть примерно так:

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

И внутри скрипта:

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

Удачи!