Getuikit 3 可排序元素移动未触发答案

【问题标题】：Getuikit 3 sortable element on moved not triggeredGetuikit 3 可排序元素移动未触发
【发布时间】：2020-01-06 07:04:10
【问题描述】：

由于某种原因，移动可排序元素后我无法执行操作。事件 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>

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

【问题讨论】：

你说得对，所以我假设当你使用 UIkit.util.on 时该元素不存在？

标签： vue.js getuikit

【解决方案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 附加到事件，它必须在启动时可用于 vue。

【讨论】：

【解决方案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");
    }
  }
}

【讨论】：