Vue 2-单击事件-使用jQuery访问数据属性

我已经做了相当多的搜索，没有运气。就是说，直到刚才我发现@texelate的评论

我正在重写一个用KnockouJS写的页面。基本上，我（在KO版本中）为某些父元素添加了属性。如最外层元素上的数据用户id=“3”。然后对外部父级中的每组数据说

data project id=“x”

。然后，在数据行中，在单击事件上，我将简单地使用jQuery，如下所示：

var UserID = $(event.target).closest("table[data-user-id]").data("userId");
var ProjID = $(event.target).closest("tr[data-project-id]").data("projectId");

这很有效。这似乎不适用于单击事件时的Vue

据我所知，这已经不可能了。我喜欢前面的方法，因为没有重复的UserID和ProjectID

似乎我现在必须复制，并且总是通过代码将UserID和projectd传递到我的事件中

我不想改变任何事情，只是想知道我到底在和谁一起工作，和什么一起工作

更新

editUsersTime: function (event, isReady) {
  var theDate = $(event.currentTarget).data("date");
  var prjRole = $(event.currentTarget).data("projectAndRole");
  var userID = isReady === true ? this.SelectedReadyUserID :  this.SelectedNotReadyUserID;
  alert("Date: " + date + "\nPR&: " + prjRole + "\nUserID: " + userID);
}

我听说

currentTarget

将在

target

上使用。两者都不起作用

上面的

警报

返回

日期

和

prjRole

的

未定义

当我传入所有值时，它会起作用：

<span v-on:dblclick="editUsersTime($event, true, d, ep.projectID + '|' + ep.projectRoleID)">{{ UserReadyDaily(ep.projectID, ep.projectRoleID, d) | numeric(2) }}</span>

如果这是的方式，则必须是，然后确定。如果有一种方法不那么重复，那就太好了

更新2

虽然收集了更多的示例代码（基本上就是将代码还原为原来的样子），但大部分代码都能正常工作。世界跆拳道联盟。我昨晚确实重新启动了，但这是javascript，我无法想象这会有什么不同。但这里有更多的代码：

<table v-if="SelectedNotReadyUserID > 0" v-bind:data-user-id="SelectedNotReadyUserID" class="table table-sm table-bordered table-hover-blue bottomless table-footer-total scrollable">
  <thead>
    ...
  </thead>
  <tbody>
    <tr v-for="ep in SelectedNotReadyUser.distinctUserProjectsAndRoles" v-bind:data-project-id="ep.projectID" v-bind:data-project-and-role="ep.projectID + '|' + ep.projectRoleID" v-bind:class="{ 'is-universal': ep.isUniversal }">
      <td>
        <cite> {{ ep.clientName }}</cite>
        <span class="float-right ml-2">
          <span> {{ ep.projectNumber }}</span>
          <a href="#" v-bind:data-user-name="SelectedNotReadyUser.firstAndLast" v-bind:data-project-number="ep.projectNumber" v-on:click="doInvoiceUser" target="invoice" title="Click to Generate an Invoice based on this Pay Period, Project and User"><i class="far fa-list-alt hand"></i></a>
        </span>
        <br />
        <span> {{ ep.projectName }}</span>
        <span class="float-right ml-1"> {{ ep.projectRole }}</span>
      </td>
      <td v-for="d in DisplayDates" v-bind:data-date="d" v-bind:class="{ canedit: !IsWeekday(d) }" class="text-right">
        <!-- This is the event -->
        <span v-on:dblclick="editUsersTime($event, false)">{{ UserDaily(ep.projectID, ep.projectRoleID, d) | numeric(2) }}</span>
      </td>
      <td class="text-right bold">
        {{ UserProjectTotal(ep.projectID, ep.projctRoleID) | numeric(2) }}
      </td>
    </tr>
  </tbody>
</table>

控制台是这样的：

target: [object HTMLSpanElement]
currentTarget: [object HTMLSpanElement]

---

我不太清楚为什么

datea

不起作用，但看到它是

span

，

父级

起了作用。

好吧，这只是一个怀疑，但Vue也会触发子元素的事件。在这些情况下，

event.target

是子元素，而不是为其指定事件处理程序的元素。例如，当你

<div @click="doThis">
    <span>Click me</span>
</div>

点击我

然后单击span元素，

会调用此

方法，但会使用

span

而不是

div

。我认为您只是将数据属性放在了错误的元素上

---

尝试将您的事件目标记录到控制台，以查看您得到了什么。

包括一些您尝试过的特定于Vue的代码。@btl我已更新了文章，为您提供了代码。哪个元素将此“editUsersTime”作为click事件处理程序？你能只显示模板的相关行吗？正如我的更新2中所说，它今天起作用了。我已经在我的问题中添加了更新2。现在我很高兴它能起作用，但昨天是这样，我很生气。

target: [object HTMLSpanElement]
currentTarget: [object HTMLSpanElement]

<div @click="doThis">
    <span>Click me</span>
</div>