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

时间:2017-12-19 09:06:12

标签: javascript vue.js

我正在尝试实现一个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>

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

1 个答案:

答案 0 :(得分:3)

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

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