CODEWITHSUNDEEP
vue.js
Anton Ovsyannikov
Anton Ovsyannikov

Reputation: 1200

vue.js 3 How to render part of template only after another part is rendered?

I need to draw couple of components and some path which will connect centers of those two components.

So I try to use refs of first two components while rendering path, but the problem is, that refs are not available yet, so I got exception

Cannot read properties of undefined (reading 'width')

So I need to delay rendering of connections until all items are rendered, refs are populated, and width and height are known. Is there a method?

<template>
  <div>
    <some v-for="(i, id) in items" :key="id" :ref="id"/>

    <!--    `width()` and `height()` are defined in `connection` component -->
    <connection
        v-for="(c, id) in cons" :key="id"
        :x0="items[c.src].x + $refs[c.src].width() / 2"
        :y0="items[c.src].y + $refs[c.src].height() / 2"
        :x1="items[c.dst].x + $refs[c.dst].width() / 2"
        :y1="items[c.dst].y + $refs[c.dst].height() / 2"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: {
        "i1": {x: 100, y: 100},
        "i2": {x: 820, y: 200},
      },
      cons: {
        "c1": {src: "i1", dst: "i2"}
      },
    }
  },
}
</script>

Upvotes: 0

Views: 544

Answers (1)

Jonathan Bowman
Jonathan Bowman

Reputation: 1646

Can you just ensure there are default values for those, so it doesn't try to call a property of undefined? Like would something as simple as $refs[something].width || 0 work?

Upvotes: 1

Related Questions