Question

我正在尝试使用kendo vue包装器实现transferTo和transferAllTo ListBox toolbox tools。

我已经尝试在jquery中实现相同的功能，并且它正在工作。并排设置看起来一样，但是vue包装器版本不起作用。包装器只是jQuery的包装器，所以我认为它应该可以工作。参见this 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

设法自己修复它。通过将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>

'transferTo'和'transferAllTo'kendoListBox工具栏工具在Vue包装器中不起作用

1 个答案: