CODEWITHSUNDEEP
vue.jsnuxt.jsvuejs3
m kh
m kh

Reputation: 398

i need run function in component from page with data page

i have a component for draw graph or tree and i use this component in the page. my axios is on the page and give datas , i need pass datas to function of component and next draw my tree from data of page.

My Page

<template light>
  <v-app>
    <TreeComponent :treedata="treeData"/>
  </v-app>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      treeData: {}
    }
  },
  mounted() {
    axios
      .get('url')
      .then(response => {
        this.treeData = response.data;
      })
  }
}
</script>

My TreeComponent

export default {
  props: {
    treedata: {
      type: Object
    },
  },
  methods: {
    drawTree(data){
      console.log("draw")
    }
  },
  mounted() {
    this.drawTree(this.treedata)
  },
}

Upvotes: 2

Views: 979

Answers (1)

Excalibaard
Excalibaard

Reputation: 2073

You're mounting the TreeData component before the APIcall is finished, meaning the drawTree method runs while treeData is still undefined. Two options:

  • If it needs to be drawn once, when the data is received, add v-if="treeData" to your component on the main page. This will only render it once your data has been returned from the server (when treeData is a truthy value).

MainPage.vue

<template light>
  <v-app>
    <TreeComponent v-if="treeData" :treedata="treeData"/>
  </v-app>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      treeData: null  // empty object is truthy, so change to falsey value
    }
  },
  mounted() {
    axios
      .get('url')
      .then(response => {
        this.treeData = response.data;
      })
  }
}
  • If it needs to be drawn again every time treeData changes, create a watcher:

TreeComponent.vue

export default {
  props: {
    treedata: {
      type: Object
    },
  },
  methods: {
    drawTree(data){
      console.log("draw", { data })
    }
  },
  watch: {
    treedata: {
      immediate: true,
      deep: true,
      handler(newV, oldV) {
        this.drawTree(newV)
      }
    },
  },
}

Upvotes: 2

Related Questions