0

次のような 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>

ペーストビンでも利用可能

ご覧のとおり、次のロジックがいくつかあります。

  • 名前
  • 削除する
  • 編集
  • 見る

Laravel を使用してブレード テンプレートから変数を渡していますが、ブレード テンプレート内で if を true に設定するにはどうすればよいですか。

例えば ​​：

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

削除ロジックを追加しません。可能であれば、どうすればいいですか？

ありがとう

4

1 に答える 1

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

幸運を！

于 2016-08-10T23:43:07.323 に答える