[BUG] links 貌似真的没有被watch

[tesla-cat]

我之前提过这个问题。。你说没问题。。但是真的真的有问题

links 数据改变之后 真的会渲染有问题 （消失）

我目前的 work around, 通过 v-if 使整个组件重新渲染

this.ganttData = undefined
setTimeout(() => {
  this.ganttData = { data, links }
}, 100)

<x-gantt
    v-if="data"
    :data="data.data"
    :links="data.links"

• 结果： links 正确渲染

如果不使用上面的 work around

// this.ganttData = undefined

• 结果： links 不会渲染

[jeremyjone]

code pls

[tesla-cat]

演示视频 注意打开声音

meeting_01.mp4

<script setup>
import { ref } from 'vue'

const data = ref({ data: [], links: [] })

function randInt(a, b) {
  return a + Math.floor(Math.random() * (b - a))
}

function updateData() {
  const data2 = { data: [], links: [] }
  const N = randInt(10, 20)
  for (let i = 0; i < N; i++) {
    const a = randInt(1, 10)
    const b = a + randInt(1, 10)
    data2.data.push({
      id: i,
      name: `task ${i + 1}`,
      startDate: new Date(2024, 5, a),
      endDate: new Date(2024, 5, b)
    })
    data2.links.push({ from: i, to: i + 1 })
  }
  data.value = data2
}

setInterval(() => {
  //data.value = undefined
  setTimeout(updateData, 100)
}, 1000)
</script>

<template>
  <x-gantt v-if="data" :data="data.data" :links="data.links">
    <x-gantt-column prop="name" />
    <x-gantt-column prop="startDate" date-format="MM/DD" />
    <x-gantt-slider />
  </x-gantt>
</template>