小编Bén*_*uge的帖子

Vue.js:"TypeError:无法设置只有getter的#<Object>的属性道具"

我试图实现一个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)

javascript vue.js

7
推荐指数
1
解决办法
3712
查看次数

尝试使用v-on:blur使上下文菜单消失...但是它不起作用

我正在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)

html onblur vue.js

3
推荐指数
1
解决办法
2万
查看次数

将 JSON 数组传递给列表道具:道具“列表”的类型检查失败。预期数组,得到字符串

我有一个名为 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)

这里有什么问题?

json vue.js

1
推荐指数
1
解决办法
3624
查看次数

标签 统计

vue.js ×3

html ×1

javascript ×1

json ×1

onblur ×1