Vue 与 Muuri - 如何使用？

Question

我对 Vue 很陌生，我的 Web 开发技能非常有限，所以很抱歉，如果这是一个基本问题。

我只是想探索如何在浏览器中创建一个可拖动的网格界面，并找到Muuri包。

现在，只需按照普通 JavaScript/HTML 中的示例代码进行操作，演示就会按预期工作。

现在我尝试使用Vue，我得到一个错误说 - “TypeError：无法读取空值的属性'getRootNode'”

这是我的 Vue 组件，应该使用 Muuri。

<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

您的问题可能是在执行事件挂接时 DOM 尚未加载。您可以尝试使用。我包含了一个片段。createdmountednew Vue({&nbsp; &nbsp; el: "#app",&nbsp; &nbsp; mounted() {&nbsp; &nbsp; &nbsp; var grid = new Muuri('.grid', {dragEnabled:true});&nbsp; &nbsp; &nbsp; alert(grid.toString());&nbsp; &nbsp; }});<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">&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <div class="item-content">&nbsp; &nbsp; &nbsp; &nbsp; <!-- Safe zone, enter your custom markup -->&nbsp; &nbsp; &nbsp; &nbsp; This can be anything.&nbsp; &nbsp; &nbsp; &nbsp; <!-- Safe zone ends -->&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; <div class="item-content">&nbsp; &nbsp; &nbsp; &nbsp; <!-- Safe zone, enter your custom markup -->&nbsp; &nbsp; &nbsp; &nbsp; <div class="my-custom-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Yippee!&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <!-- Safe zone ends -->&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>