CODEWITHSUNDEEP
javascriptvue.js
Bénédicte Lagouge
Bénédicte Lagouge

Reputation: 492

Vue.js : "TypeError: Cannot set property props of #<Object> which has only a getter"

I am trying to instanciate a Vue component and I am getting the error :

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

I am also using the library vuedraggable but I presume that the problem is more a Vue problem than a vuedraggable one. Below is my code.

Here is draggable-list.vue

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

draggable-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>

My main.js calls then another js file :

require("./components/manager");

In the manager I instanciate my Vue instance : 

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"}]
  }
});

And I am using it in my index.html like this : 

<!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>

Does anyone see what's wrong here?

Upvotes: 11

Views: 13960

Answers (1)

Placoplatr
Placoplatr

Reputation: 480

As you are using CommonJS modules, try to require your Vue component that way :

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

Upvotes: 8

Related Questions