Vue公司JS條件呈現

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和我的刀模板傳遞變量，但我怎麼設置，如果爲true刀片模板中。

例如：

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

不會添加刪除邏輯。我該如何去做，如果可能的話？

由於

Answer 1

要從組件添加邏輯首先需要一個事件從該組件綁定到一個元素，然後利用在其內部（https://vuejs.org/guide/events.html）使用methods。

模板應該是這個樣子：

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

和腳本里面：

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

祝你好運！