vue3-draggable icon indicating copy to clipboard operation
vue3-draggable copied to clipboard

现在新增删除传过去的数据 如何能做成响应式的

Open WEBxiyao opened this issue 3 years ago • 8 comments

现在传过去的数据列表想新增一条数据或者删除一条数据 都不能响应式的去更新,只能重新渲染这个组件才能更新,应为setup只走了一次

WEBxiyao avatar Jul 08 '22 07:07 WEBxiyao

我也是遇到这个问题

superermiao avatar Aug 16 '22 08:08 superermiao

I also encountered this. To solve it, I implemented this custom condition:

const isResettingColumns = ref(false);

const handleResetColumns = async () => {
    /**
     * isResettingColumns is a DOM hack to get the Draggable container
     * to reset the value of the v-model. The draggable list does
     * not reset properly without this combination of isResettingColumns
     * and waiting until nextTick.
     */
    isResettingColumns.value = true;
    localColumns.value = cloneDeep(props.defaultColumns);
    await nextTick();
    isResettingColumns.value = false;
};

...

<Draggable v-if="!isResettingColumns" v-model="localColumns" transition="100">

This momentarily de-renders the draggable container and re-renders it with different state.

agm1984 avatar Dec 16 '22 20:12 agm1984

@agm1984 thanks, it works. Here's my sample codes:

<template>
  <draggable v-model="imageList" v-if="imageList.length > 0 && visible">
    <template v-slot:item="{ item }">
      <el-image :src="item" />
    </template>
  </draggable>
</template>

<script>
import Draggable from 'vue3-draggable'
export default {
  components: { Draggable },
  data () {
    return {
      visible: true,
      imageList: []
    }
  },
  methods: {
    async addImage (file) {
      this.imageList.push(...get image link from somewhere...)
      this.visible = false
      this.$nextTick(() => {
        this.visible = true
      })
    }
  }
}
</script>

wwwossai avatar Dec 18 '22 08:12 wwwossai

@agm1984 You should create a pr for this implementation this helped me out after struggling with the package for a while

keygun-development avatar Jan 10 '23 21:01 keygun-development

@wwwossai Very grateful for the decision. It helped me.

k0ndratov avatar Feb 16 '23 00:02 k0ndratov

The message above is a phishing attempt. You can report them here https://support.github.com/contact/report-abuse?category=report-abuse&report=akashakki&report_id=26270229&report_type=user

@jintaolee, @imRohan, @shortdoom, @heypoom, @mauuz, @hacker-DOM, @Sawyer-li, @paulschick, @X140Yu, @alonweinstein, @Cryptolibertarian-id, @pedoc, @lewisgibson, @mbsrc, @Jinksi, @LeHoang88, @Atish1010, @titangene, @HCenggel

I suppose you ment to report "Pappyskull1"?

keygun-development avatar Mar 01 '24 14:03 keygun-development

Why ping me?

I've been getting some harassment notifications lately, it's very annoying.

pedoc avatar Mar 01 '24 14:03 pedoc

Why ping me?

I've been getting some harassment notifications lately, it's very annoying.

Just report all of them and send the comment's link in the form as a proof. Got 20+ profiles be taken down in the last month.

wottpal avatar Mar 02 '24 01:03 wottpal