5
Tôi cố gắng để instanciate một thành phần Vue và tôi nhận được lỗi:Vue.js: "Lỗi Loại: Không thể thiết lập đạo cụ tài sản của # <Object> mà chỉ có một getter"
[Vue warn]: Error in render: "TypeError: Cannot set property props of
#<Object> which has only a getter"
(found in <Root>)
Tôi cũng đang sử dụng thư viện vuedraggable nhưng tôi đoán rằng vấn đề là nhiều hơn một vấn đề Vue hơn một vuedraggable. Dưới đây là mã của tôi.
Đây là kéo-list.vue
<template src="./draggable-list-component.html"></template>
<script src="./draggable-list.js"></script>
kéo-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");
}
}
};
kéo-list-component.html:
<div id="draggable-list">
<draggable element="ul"
:list="elements">
<!-- TODO -->
</draggable>
</div>
main.js My cuộc gọi sau đó một tệp js khác:
require("./components/manager");
Trong quản lý tôi instanciate dụ Vue của tôi:
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"}]
}
});
Và tôi đang sử dụng nó trong index.html của tôi như thế này:
<!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>
Có ai thấy có gì sai ở đây ?