Question

tl; dr：：在我的Vue.js应用中，必须通过d3事件dispatch更改属性后，才能触发多个组件中的每个组件进行更新，但只有“最终”反应。

在我的应用中，有一个Loc组件，在单独的Chart组件中包含23个d3可视化，每个组件包含47个<a>标签（数据点）。

悬停在每个<a>上必须触发Tip组件中定义的不同Semantic-UI popup。

总而言之，应该有（47 * 23）个Tip组件，但仅渲染（47 * 1）个。评估Tip的生命周期挂钩表示仅（47 * 1）个正在创建和安装。

即使Chart有23个实例，并且renderComplete是在data函数中定义的，它似乎只反应一次。

伪应用看起来像这样：

<Loc>
  <Chart v-for="..."> <!-- n=23 -->
    <svg :id=uuid></svg>
    <div v-if="renderComplete">
      <Tip v-for="..."> <!-- n1=47 -->

每个d3渲染完成渲染后，都会调度自定义completed事件。

Chart被定义为Base的扩展。 Base包含renderComplete的定义和事件监听器：

// Base.vue
data() {
 return {
    renderComplete: false
  }
},  
mounted() {
  this.myprop.on('completed.vz',(d)=>{
    this.renderComplete = true
    console.log(this.renderComplete)
  })
}

所有可视化都进行渲染，但是仅渲染23个中的Tip中的Chart个组件。前22个失败。控制台输出指示事件已调度，并且侦听器执行23次。（renderComplete被true报告了23次，是预期的情况）

我尝试将renderComplete设为computed，也尝试将on声明放在created中。我还尝试了Base和Chart中许多声明的迭代，但是在每种情况下它要么无效，要么崩溃。

您可以提供的任何见解将最有帮助。谢谢！

Answer 1

我发现了问题所在。这是一个脸蛋。

正在使用require加载包含d3函数的模块，从而导致该模块具有单个实例。多次使用它只会简单地重置其状态。对Chart上renderComplete的第一个实例进行后处理时，仅引用了具有最终迭代中的状态属性的单例。

要解决该问题，我将d3chart.js重构为es6 class，用new调用，并且不再将其绑定在component声明中：

旧方法

在Chart的{{1}}使用情况声明中：

Loc

，并在<component :is="Chart" :myprop="myprop"></component>定义中：

Loc

新方法

data() {
  return {
    myprop: require('@/viz/d3chart.js')
  }
}

和

<component :is="Chart"></component>

感谢您的帮助！

使用自定义d3事件更新Vue触发器

1 个答案: