Question

我正在尝试实现一个Vue组件，我收到错误：

[Vue warn]: Error in render: "TypeError: Cannot set property props of 
#<Object> which has only a getter"
(found in <Root>)

我也在使用vuedraggable库，但我认为问题更多的是Vue问题，而不是vuedraggable问题。以下是我的代码。

这是draggable-list.vue

<template src="./draggable-list-component.html"></template>
<script src="./draggable-list.js"></script>

可拖动-list.js

const draggable = require("vuedraggable");

module.exports = {
  name: "draggable-list",
  components: {
    draggable
  },

  // properties which has been passed from the parent vue to the component
  props: ["title", "elements"],

  data() {
    return {
      isDragging: false,
    };
  },

  methods: {
    test() {
      console.log("blou");
    }
  }
};

draggable-list-component.html：

<div id="draggable-list">
  <draggable element="ul"
             :list="elements">
    <!-- TODO -->
  </draggable>
</div>

我的main.js然后调用另一个js文件：

require("./components/manager");

在经理中我实例化我的Vue实例：

const Vue = require("vue/dist/vue.common");
const draggableList = require("./draggable-list.vue");

let triggerLibrary;

triggerLibrary = new Vue({
  el: "#draggable-list",
  template: "<draggableList :title='title' :elements='triggerElements' 
/>",
  components: {draggableList},

  data: {
   title: "Trigger library",
    triggerElements: [{name:"Trigger name", description:"Quick trigger 
description"}]
  }
});

我正在我的index.html中使用它：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>planner</title>
  </head>
  <body>
  <div id="draggable-list">
    <draggable-list></draggable-list>
  </div>
  </body>

有人看到这里有什么问题吗？

Answer 1

当您使用CommonJS模块时，尝试以这种方式要求您的Vue组件：

const draggableList = require("./draggable-list.vue").default;

Vue.js：“TypeError：无法设置＃<object>的属性道具，它只有一个getter”

1 个答案: