2017-12-19 70 views
5

मैं एक Vue घटक instanciate करने की कोशिश कर रहा हूँ और मैं त्रुटि हो रही है:Vue.js: "लेखन त्रुटि: # <Object> का सेट नहीं कर सकता संपत्ति रंगमंच की सामग्री है जो केवल एक गेटर है"

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

मैं भी उपयोग कर रहा हूँ लाइब्रेरी vuedraggable लेकिन मुझे लगता है कि समस्या एक vuedraggable एक की तुलना में एक वू समस्या है। नीचे मेरा कोड है।

<div id="draggable-list"> 
    <draggable element="ul" 
      :list="elements"> 
    <!-- TODO --> 
    </draggable> 
</div> 

मेरे main.js कॉल:

यहाँ खींचने योग्य-list.vue

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

खींचने योग्य-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"); 
    } 
    } 
}; 

खींचने योग्य-सूची-component.html है फिर एक और जेएस फ़ाइल:

require("./components/manager"); 

प्रबंधक में मैं अपने Vue उदाहरण instanciate:

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

और मैं इसे इस तरह उपयोग कर रहा हूँ मेरी index.html में:

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

द्वारा किसी को भी करता है यहाँ क्या गलत है ?

उत्तर

2

आप CommonJS मॉड्यूल का उपयोग कर रहे हैं, अपने Vue घटक की आवश्यकता होती कोशिश कि जिस तरह से:

const draggableList = require("./draggable-list.vue").default; 
संबंधित मुद्दे

 संबंधित मुद्दे