Question

所以我正在尝试绑定click事件，因此它仅在单击实际href标题时运行。这是我的代码。

          <collapse :multiple-active="false">
          <div v-for="(campaign, index) in allCampaigns" :key="index">
                <collapse-item :title="campaign.campaign_name" @click.native.prevent="grabClientFacebookData(campaign.id)">
                <div v-if="spinner == true" style="text-align: center"><img src="../../../../img/spinner.gif"></div>
                  <div v-if="search == true">
                      <vue-good-table
                          :columns="columns"
                          :rows="tableData"
                          styleClass="vgt-table striped bordered"/>
                      <highcharts :options="chartOptions"></highcharts>
                  </div>
                </collapse-item>
          </div>
      </collapse>

这是父元素：

  <div class="card card-plain">
<div role="tab" id="headingOne" class="card-header">
  <a data-toggle="collapse"
     data-parent="#accordion"
     :href="`#${itemId}`"
     @click.prevent="activate"
     :aria-expanded="active"
     :aria-controls="`content-${itemId}`">
    <slot name="title" @click.prevent="grabClientFacebookData(campaign.id)">
      {{title}}
    </slot>
    <i class="now-ui-icons arrows-1_minimal-down"></i>
  </a>
</div>
<collapse-transition :duration="animationDuration">
  <div v-show="active"
       :id="`content-${itemId}`"
       role="tabpanel"
       :aria-labelledby="title"
       class="collapsed">
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</collapse-transition>

我对vue很新，并且想知道是否可能。我的问题是，只要点击崩溃的任何端口，点击事件就会发生，而不仅仅是标题。

Answer 1

您是否尝试在绑定{{title}}的范围内绑定事件？即

<span @click.prevent="grabClientFacebookData(campaign.id)">{{title}}</span>

将点击事件绑定到Vue中的：title

1 个答案: