Menu
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?
428
If you do, Vue will warn you in the console: There are usually two cases where it's tempting to mutate a prop: The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards. In this case, it's best to define a local data property that uses the prop as its initial value:
The Boolean absent props will be cast to false. You should set a default value for it in order to get desired behavior. If a default value is specified, it will be used if the resolved prop value is undefined - this includes both when the prop is absent, or an explicit undefined value is passed.
All props are optional by default, unless required: true is specified. An absent optional prop other than Boolean will have undefined value. The Boolean absent props will be cast to false. You should set a default value for it in order to get desired behavior.
When prop validation fails, Vue will produce a console warning (if using the development build). Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc.) will not be available inside default or validator functions.
As you are using CommonJS modules, try to require your Vue component that way :
const draggableList = require("./draggable-list.vue").default;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
