窗口内的kendo-vue下拉列表无法正常工作

时间:2018-02-01 22:14:36

标签: kendo-ui vuejs2

我在这几个小时内一直在努力,但我找不到任何方法让它发挥作用。

问题是如果你把它放在一个窗口里,下拉列表就不起作用了。这里有一个例子。

https://plnkr.co/edit/eBpc4kEcHr7uSq6Zdq6h?p=preview

<kendo-window :width="'300px'" :title="'Window title'" :visible="visible" style="display:none">

<kendo-datasource ref="datasource" :type="'odata'" :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
</kendo-datasource>

<kendo-dropdownlist :data-source-ref="'datasource'" :data-text-field="'ProductName'" :data-value-field="'ProductID'" :placeholder="'Select product'">
</kendo-dropdownlist>

https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">

有解决方法吗?

问候。

2 个答案:

答案 0 :(得分:2)

我无法看到您正在尝试的内容有什么问题,但它适用于internal slot datasource

  <kendo-window
          :width="'300px'"
          :title="'Window title'"
          :visible="visible"
          style="display:none">

      <kendo-dropdownlist
              :data-text-field="'ProductName'"
              :data-value-field="'ProductID'"
              :option-label="'Select product'">

          <kendo-datasource
                  slot="kendo-datasource"
                  :type="'odata'"
                  :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
          </kendo-datasource>

      </kendo-dropdownlist>

  </kendo-window>

答案 1 :(得分:0)

它看起来像一个错误 - 我已经记录了它here。您可以使用临时使用内部插槽(由rareclass建议)为here

 <kendo-window :width="'300px'"
              :title="'Window title'"
              :visible="visible"
              style="display:none">
    <h4>Window content</h4>
        <kendo-dropdownlist style="width: 100%" :data-text-field="'ContactName'" >
        <kendo-datasource slot="kendo-datasource"
                          :type="'odata'"
                          :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
                          :group-field="'Country'">
        </kendo-datasource>
   </kendo-dropdownlist>
</kendo-window>