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的mount（）方法中，一切都可以正常工作。

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附加在事件上，因此必须在启动时将其提供给使用。

Answer 2

如果您在index.html中将UIkit添加为<script src="./src/js/uikit.min.js"></script>，则无法按预期在Vue内部使用它，而是：

npm i --save uikit

然后在您的组件中

import UIkit from "uikit";

之后，您可以在任何地方使用

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

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

2 个答案: