Vue 與 Muuri - 如何使用？

Question

我對 Vue 很陌生，我的 web 開發技能非常有限，如果這是一個基本問題，很抱歉。

我只是想探索如何在瀏覽器中創建可拖動的網格界面，並找到了 Muuri package。

現在只需遵循純 JavaScript/HTML 中的示例代碼，演示就可以按預期工作。

現在我用 Vue 嘗試它，我收到一條錯誤消息 - “TypeError: Cannot read property 'getRootNode' of null”

這是我應該使用 Muuri 的 Vue 組件。

<template>
  <div class="grid">

    <div class="item">
      <div class="item-content">
        <!-- Safe zone, enter your custom markup -->
        This can be anything.
        <!-- Safe zone ends -->
      </div>
    </div>

    <div class="item">
      <div class="item-content">
        <!-- Safe zone, enter your custom markup -->
        <div class="my-custom-content">
          Yippee!
        </div>
        <!-- Safe zone ends -->
      </div>
    </div>

  </div>
</template>

<script>
  import 'web-animations-js';
  import Muuri from 'muuri';

  export default {
    name: 'Grid',
    created() {
      var grid = new Muuri('.grid', {dragEnabled:true});
      console.log(grid.toString());
    }
  }
</script>

<style scoped>
  .grid {
    position: relative;
  }
  .item {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 5px;
    z-index: 1;
    background: #000;
    color: #fff;
  }
  .item.muuri-item-dragging {
    z-index: 3;
  }
  .item.muuri-item-releasing {
    z-index: 2;
  }
  .item.muuri-item-hidden {
    z-index: 0;
  }
  .item-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
</style>

非常感謝任何幫助或建議！

Answer 1

您的問題可能是在執行created的事件掛鈎時 DOM 尚未加載。 您可以嘗試使用mounted 。 我已經包含了一個片段。

 new Vue({ el: "#app", mounted() { var grid = new Muuri('.grid', {dragEnabled:true}); alert(grid.toString()); } });

 <script src="https://unpkg.com/web-animations-js@2.3.2/web-animations.min.js"></script> <script src="https://unpkg.com/muuri@0.8.0/dist/muuri.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" class="grid"> <div class="item"> <div class="item-content"> <,-- Safe zone. enter your custom markup --> This can be anything, <!-- Safe zone ends --> </div> </div> <div class="item"> <div class="item-content"> <!-- Safe zone, enter your custom markup --> <div class="my-custom-content"> Yippee! </div> <!-- Safe zone ends --> </div> </div> </div>