I am trying to instanciate a Vue ponent 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-ponent.html"></template>
<script src="./draggable-list.js"></script>
draggable-list.js
const draggable = require("vuedraggable");
module.exports = {
name: "draggable-list",
ponents: {
draggable
},
// properties which has been passed from the parent vue to the ponent
props: ["title", "elements"],
data() {
return {
isDragging: false,
};
},
methods: {
test() {
console.log("blou");
}
}
};
draggable-list-ponent.html :
<div id="draggable-list">
<draggable element="ul"
:list="elements">
<!-- TODO -->
</draggable>
</div>
My main.js calls then another js file :
require("./ponents/manager");
In the manager I instanciate my Vue instance :
const Vue = require("vue/dist/vuemon");
const draggableList = require("./draggable-list.vue");
let triggerLibrary;
triggerLibrary = new Vue({
el: "#draggable-list",
template: "<draggableList :title='title' :elements='triggerElements'
/>",
ponents: {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?
I am trying to instanciate a Vue ponent 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-ponent.html"></template>
<script src="./draggable-list.js"></script>
draggable-list.js
const draggable = require("vuedraggable");
module.exports = {
name: "draggable-list",
ponents: {
draggable
},
// properties which has been passed from the parent vue to the ponent
props: ["title", "elements"],
data() {
return {
isDragging: false,
};
},
methods: {
test() {
console.log("blou");
}
}
};
draggable-list-ponent.html :
<div id="draggable-list">
<draggable element="ul"
:list="elements">
<!-- TODO -->
</draggable>
</div>
My main.js calls then another js file :
require("./ponents/manager");
In the manager I instanciate my Vue instance :
const Vue = require("vue/dist/vue.mon");
const draggableList = require("./draggable-list.vue");
let triggerLibrary;
triggerLibrary = new Vue({
el: "#draggable-list",
template: "<draggableList :title='title' :elements='triggerElements'
/>",
ponents: {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?
Share Improve this question asked Dec 19, 2017 at 9:06 Bénédicte LagougeBénédicte Lagouge 4922 gold badges9 silver badges25 bronze badges1 Answer
Reset to default 8As you are using CommonJS modules, try to require your Vue ponent that way :
const draggableList = require("./draggable-list.vue").default;