I have a Icon.vue file that looks as follows :
<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> Also availble on pastebin
As you can see, There is some logic in there for the following :
- name
- remove
- edit
- view
I am using Laravel and passing variables from my blade template, But how do I set the if to true within the blade template.
For example :
<icon path="{{url('img/admin/add.png') }}" name="" remove="remove"></icon> Does not add the remove logic. How do I go about doing that, If possible?
Thanks
