Question

我有一个Icon.vue文件，如下所示：

function initialize() {
  var center = new google.maps.LatLng(37.4419, -122.1419);
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var markers = [];
  var markerImage = new google.maps.MarkerImage("chart.png",new google.maps.Size(24, 32));

  // create the clusterer
  var markerCluster = new MarkerClusterer(map, [], {imagePath: 'm'});

  $.getJSON( "http://example.com/data2.json", function( data ) {
    $.each( data, function( key, val ) {
      var dataDealers = val;
      console.log(val.field_longitude);
      var latLng = new google.maps.LatLng(dataDealers.field_latitude,dataDealers.field_longitude);
      var marker = new google.maps.Marker({
        position: latLng,
        icon: markerImage
      });
      markers.push(marker);
      // add each marker to the clusterer as it is created
      markerCluster.addMarker(marker);
  });
});

也适用于pastebin

如您所见，以下内容有一些逻辑：

名称
除去
修改
视图

我正在使用Laravel并从我的刀片模板传递变量，但如何在刀片模板中将if设置为true。

例如：

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

不添加删除逻辑。如果可能，我该怎么做？

由于

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

祝你好运！

Vue JS条件渲染

1 个答案: