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 尚未加载。您可以尝试使用。我包含了一个片段。createdmounted

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>