Question

我做了很多搜索而没有运气。也就是说，直到我刚发现@ texelate的评论here。

我正在重写用 KnockouJS 编写的页面。基本上，我（在KO版本中）为某些父元素添加了属性。像最外层元素上的data-user-id="3"一样。然后对外部父级中的每组数据说data-project-id="x"。然后，在数据行中，在click事件上我只会使用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 和 ProjectID 传递到我的活动中？

我不想改变任何事情，只是要确切知道我和谁合作。

更新

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。两者都没有。

上面的alert会为undefined和theDate返回prjRole。

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

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

这是事件：

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

如果这是必须的方式，那么确定。如果有一种重复性较低的方法，那就太好了。

更新2

在一起获取更多示例代码的同时，基本上将我的代码恢复到原来的状态，大部分代码都有效。 WTF。我昨晚做了重启，但这是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>

以下是活动：

editUsersTime: function (event, isReady) {
  console.log("target: " + event.target);
  console.log("currentTarget: " + event.currentTarget);
  var userID = $(event.target).closest("table[data-user-id]").data("userId")
  var parid = $(event.target).closest("tr[data-project-and-role]").data("projectAndRole");
  var datea = $(event.target).closest("td[data-data]").data("date"); // Did not work
  var dateb = $(event.target).parent().data("date"); // Worked
  ...
}

控制台是这样的：

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

我不确定为什么datea无法正常工作，但看到它是span，parent就行了。

Answer 1

好的，这只是一种怀疑，但Vue也会触发子元素的事件。在这些情况下，100% { opacity: 1; }是子元素，而不是您为其指定事件处理程序的元素。例如，当你有

时

event.target

并且您点击了span元素，<div @click="doThis"> <span>Click me</span> </div>方法被调用但doThis而不是span。我认为你的数据属性只是错误的元素。

尝试将您的活动目标记录到控制台，以了解您的目标。

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

1 个答案: