kendo-ui - 'transferTo' 和 'transferAllTo' kendoListBox 工具栏工具在 vue 包装器中不起作用

Question

我正在尝试使用 kendo vue 包装器transferTo实现transferAllTo ListBox 工具箱工具。

我已经尝试在 jquery 中实现相同的功能并且它正在工作。并排设置看起来相同，但 vue 包装器版本不起作用。包装器只是 jquery 的包装器，所以我认为它应该可以工作。以这个 slackBlitz为例。

<div id="vueapp" class="vue-app">
  <h4> Made with vue wrapper</h4>
  <kendo-listbox ref="listbox1" 
        :connect-with="'listbox2'"
        :data-source="['Item1','Item2']"
        :toolbar-tools="['transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom']">
  </kendo-listbox>
  <kendo-listbox ref="listbox2"
        :connect-with="'listbox1'"
        :data-source="[]">
  </kendo-listbox>
  </br>
  <h4>Made with jquery</h4>
  <select id="listboxA"></select>
  <select id="listboxB"></select>
</div>

脚本

$("#listboxA").kendoListBox({
  connectWith: "listboxB",
  dataSource: [ "ItemA","ItemB"],
  toolbar: {
      tools: [ "transferTo", "transferFrom", "transferAllTo", "transferAllFrom" ]
  }
});

$("#listboxB").kendoListBox({
  connectWith: "listboxA",
  dataSource: []
});

Answer 1

设法自己修复它。通过用 a 替换ref属性，id我能够让它工作。

<kendo-listbox id="listbox1"
    :connect-with="'listbox2'"
    :data-source="['Item1','Item2']"
    :toolbar-tools="['transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom']">
</kendo-listbox>
<kendo-listbox id="listbox2"
    :connect-with="'listbox1'"
    :data-source="[]">
</kendo-listbox>