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

祝你好运！