Vue.js: "TypeError: Unable to set property details # <Object>, which has only getter"
I try to initialize a Vue component and I get an error:
[Vue warn]: Error in render: "TypeError: Cannot set property props of #<Object> which has only a getter" (found in <Root>) I also use the vuedraggable library, but I believe that the problem is more of a Vue problem than vuedraggable. Below is my code.
Here is draggable-list.vue
<template src="./draggable-list-component.html"></template> <script src="./draggable-list.js"></script> drag-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 another js file:
require("./components/manager"); In the manager, I run the 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 use it in my index.html as follows:
<!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?
+5