我试图实现一个Vue组件,我收到错误:
[Vue warn]: Error in render: "TypeError: Cannot set property props of
#<Object> which has only a getter"
(found in <Root>)
Run Code Online (Sandbox Code Playgroud)
我也在使用vuedraggable库,但我认为问题更多的是Vue问题,而不是vuedraggable问题.以下是我的代码.
这是draggable-list.vue
<template src="./draggable-list-component.html"></template>
<script src="./draggable-list.js"></script>
Run Code Online (Sandbox Code Playgroud)
可拖动,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");
}
}
};
Run Code Online (Sandbox Code Playgroud)
draggable-list-component.html:
<div id="draggable-list">
<draggable element="ul"
:list="elements">
<!-- …Run Code Online (Sandbox Code Playgroud) 我正在vue.js中编写一个简单的上下文菜单。当我右键单击一个特殊元素时,它会打开菜单(使用@ contextmenu.prevent)。
但是,当我在菜单外单击时,我希望它消失。这不起作用...我正在使用v-on:blur,也尝试了@blur。他们都没有用。这是我的html:
<!-- my context menu -->
<ul class="context-menu"
ref="contextMenuTrack"
v-if="openedMenu === 'contextMenuTrack'"
v-bind:style="{top: top, left: left}"
v-on:blur="closeMenu()">
<li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li>
</ul>
<div>
[ ...... stuff here ......]
<!-- Where the menu is called-->
<li class="track"
v-for="track in project.structure.tracks">
<div class="track-name-row">
<li @contextmenu.prevent="openContextMenuTrack(track,$event)"
v-on:click="expandTrack(project.structure.tracks.indexOf(track))"
class="track-color-viewer"></li>
[ .... other li tags .....]
</div>
</li>
[ ...... stuff here ......]
</div>
Run Code Online (Sandbox Code Playgroud)
以下是用于Vue组件菜单的数据:
data() {
return {
//the kind of menu which is opened
openedMenu: undefined,
//the coordinate of the menu
top: …Run Code Online (Sandbox Code Playgroud) 我有一个名为 jsonObject 的 json 对象,其中包含一个名为tracks 的数组。我在我的方法和模板中使用 this.jsonObject.tracks 作为数组(使用 v-for),Vue 没有抱怨。但是我的 vue 模板的这一部分有问题:
<draggable element="ul"
:options="{group:'track'}"
list="jsonObject.tracks"
:move="onMove"
@end="onMoveTrackFinished">
[......]
</draggable>
Run Code Online (Sandbox Code Playgroud)
我收到错误,这是由于列表道具:
Invalid prop: type check failed for prop "list". Expected Array, got String.
Run Code Online (Sandbox Code Playgroud)
这里有什么问题?