Vue 3 中的可拖动不会显示值

Question

我正在使用 Vue draggable 通过拖放对 Store.js 中的项目进行排序（我在此处简化了我的示例，仅使用 ['a', 'b', 'c'] 作为我的商店数据）。

我也在使用计算的属性，可从 setup()

访问

    <draggable v-model="myList" item-key="id" @start="drag=true" @end="drag=false" >
        <template #item="{card}">
            <p>{{ card }}</p>
        </template>
    </draggable>

import draggable from 'vuedraggable';

export default {
    name: "Dashboard",
    components: {
        draggable
    },
    setup() {
        const cards = computed(() => {
            return ['a', 'b', 'c']
        })
        return {
            cards
        }
    }
}

我知道模板遍历 cards 但没有显示值或无法访问。

Answer 1

在Vue 3中-执行setup时，组件实例还没有创建。因此，您将无法访问 data、computed、methods 组件选项。

参考： https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties

同样在 Draggable 组件中，数组项将由 element 变量访问。

更新的模板代码：

 <draggable v-model="myList" item-key="id" @start="drag=true" @end="drag=false" >
            <template #item="{element}">
                  <p>{{ element.value }}</p>
            </template>
    </draggable>

尝试更改组件代码如下，

import draggable from 'vuedraggable';

export default {
    name: "Dashboard",
    components: {
        draggable
    },
    data:function(){
     return {
       drag:false
     }

    },
    computed:{
      myList:function(){
          return [{id:1,value:'Card A'},{id:2, value:'Card B'}];
      }
    }
}

Vue 3 中的可拖动不会显示值

Draggable in Vue 3 won't display value

draggable

vue.js

sortablejs

vuejs3