Getuikit 3移动时的可排序元素未触发

Question

由于某些原因，我不能在移动可排序元素后执行操作。未调用/触发事件UIkit.util.on('#sortable'，'moved'，function (item) {})；。

这个应用程序是用vue.js制作的，但我没有收到任何错误，所有其他的uikit功能都工作得很好。大约有600行代码，所以我将只展示那些重要的(我认为)。

<template>
  <div class="products">
    <MainMenu />
    <div id="ordering" uk-offcanvas="overlay: true">
        <div class="uk-offcanvas-bar" style="width:500px">
            <button class="uk-offcanvas-close" type="button" uk-close></button>
            <div>Drag to re-arrange the fields order<br><br>
            <ul id="sortable" class="uk-grid-small uk-child-width-1-1 uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
              <li v-for="(data, idx) in computedData" :key="idx" :id="data.product_field_name">
                  <div class="uk-card uk-card-default uk-card-body uk-padding-small">{{data.product_field_name}}</div>
              </li>
          </ul>
          </div>
        </div>
    </div>
    <button type="button" class="uk-button uk-button-default" uk-toggle="target: #ordering"><span uk-icon="move"></span> Field Ordering</button>

    <!-- REST OF HTML GOES HERE: FORMS, MODALS, ETC. -->

  </div>
</template>
<script>
UIkit.notification('test message','danger'); //THIS TRIGGERS OK

//UIKit ordering action - THIS DOES NOT
UIkit.util.on('#sortable', 'moved', function (item) {
  console.log('moved triggered');
});


// @ is an alias to /src
import MainMenu from "@/components/MainMenuEMVO.vue";
import axios from "axios";

export default {
  name: "products",
  components: {
    MainMenu
  },
  data() {
    return {
      add_dependency: {
        field: "",
        field_selection: ""
      },
      remove_dependency: {
        id: "",
        field_name: "",
        dependency_field: "",
        dependency_rule: "",
        dependency_value: "",
        enforcing_value: "",
      },
      productFields: "",
      lookupTables: "",
      dependencies: "",
      departments: "",
      search: "",
      computedFields: "",
    };
  },
  mounted() {
    let stateCheck = setInterval(() => {
      if (document.readyState === 'complete') {
        clearInterval(stateCheck);
        this.getProductsConfig();
      }
    }, 100);
  },
  computed: {...},
  methods: {
    getProductsConfig(){...},
    enableEdit(id){...},
    cancelEdit(id){...},
    submitEdit(id){...},
    addRule(id, field_name){...},
    removeDependency(fieldName, id){...}
  }
};
</script>

如前所述，控制台中没有错误，甚至没有警告，所以我真的不知道从哪里开始查看它。

Answer 1

我设法解决了这个问题，所以如果有人有同样的问题：

一旦我将代码移到vue.js的mounted()方法中，一切都会正常工作。

mounted() {
    //UIKit ordering action - THIS DOES NOT
    UIkit.util.on('#sortable', 'moved', function (item) {
      console.log('moved triggered');
    });

    let stateCheck = setInterval(() => {
      if (document.readyState === 'complete') {
        clearInterval(stateCheck);
        this.getProductsConfig();
      }
    }, 100);
  },

UIkit.notification运行良好，但我猜因为util是附加到event的，所以它必须在启动时可用于vue。

Answer 2

如果你将UIkit作为<script src="./src/js/uikit.min.js"></script>添加到你的index.html中，那么你就不能像预期的那样在Vue中使用它，而应该这样做：

npm i --save uikit

然后在您的组件中

import UIkit from "uikit";

在此之后，您可以随处使用

methods: {
  alertOnClick(msg) {
      UIkit.notification(msg, "danger");
    }
  }
}