Vue.js component method on creation

Question

I'm new to Vue and I'd like to make an AJAX call every time my component is rendered. I have a vue component lets say "test-table" and Id like to fetch the contents via an AJAX call. There are many such tables and I track the active one via an v-if/v-else-if etc.

Currently I have a cheaty solution: in the template for the component I call a computed property called getData via
{{ getData }}
which initiates the Ajax call but does only return an empty string. Id like to switch to the proper way but dont know how.

My code is like so: (its typescript)

Vue.component("test-table", {
        props: ["request"],
        data () {
            return {
                tableData: [] as Array<TableClass>,
            }
        },
        template: `{{ getData() }} DO SOME STUFF WITH tableData...`,
        computed: {
            getData() : string {
                get("./foo.php", this.request, true).then(
                    data => this.tableData = data.map(element => new TableClass(data))
                )
                return "";
            }
        }
}

HTML:

<test-table v-if="testcounter === 1" :request="stuff...">
<test-table v-else-if="testcounter === 2" :request="other stuff...">
...

get is an async method that just sends a GET request with request data to the server. The last parameter is only for saying the method to expect a JSON as answer. Similar to JQuerys getJSON method.

the "created" method does NOT work! It fires only one time when the component is first created. If I deactivate and activate again (with v-if) the method is not called again.

Btw: I'm using Vue 2.6.13

watch request, then fire getData, which should be a method not a computed prop — Lawrence Cherone
– Lawrence Cherone, Commented Jul 8, 2021 at 10:04
Wow, this could actually work. Why didn't u write an answer? Also do you know why they've downvoted my question? Isn't it specific enough or...? — Florian Becker
– Florian Becker, Commented Jul 8, 2021 at 14:06

Lawrence Cherone · Accepted Answer · 2021-07-08 22:07:43Z

1

Lifecycle hooks won't fire every time if the component is cached, keep-alive etc

Add a console.log in each of the lifecycle hooks to see.

Change to use a watcher which handles firing getData again if request changes.

  ...
  watch: {
    request: {
      handler: function() {
        this.getData()
      },
      deep: true
    }
  },
  created() {
     this.getData()
  },
  methods: {
    getData(): string {
      // do request
    }
  }

edited Jul 8, 2021 at 22:07

answered Jul 8, 2021 at 17:33

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 03:13:14Z

0

@FlorianBecker try the lifecycle hook updated(). It may be a better fit for what you're trying to achieve. Docs here.

edited Jul 16, 2022 at 3:13

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 8, 2021 at 10:00

RuNpiXelruN

1,9202 gold badges19 silver badges24 bronze badges

1 Comment

Florian Becker Over a year ago

This doesn't work since updated is only called, when a watched property changes and my properties only change on the Ajax call receive. Also it would be an infinite loop since every time the Ajax call comes back an update would be triggered cause it edited the property leading to an update which calles another Ajax call and so on and so forth

tony19 · Accepted Answer · 2022-07-16 04:12:38Z

0

You should be able to use the mounted hook if your component is continuously rendered/unrendered using v-if, like so:

export default {
    mounted() {
        // do ajax call here
        this.callAMethod();
    },
    ...
}

Alternatively, you could use the created() hook but it is executed earlier in the chain, so this means the DOM template is not created yet so you cant refer to it. mounted usually is the way to go.

More info on these hooks can be found here.

edited Jul 16, 2022 at 4:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 8, 2021 at 9:55

Flame

7,7563 gold badges43 silver badges64 bronze badges

2 Comments

Florian Becker Over a year ago

Tried it, doesn't work. The mounted method is only called once the APP gets mounted. At least in my case. This doesn't server any purpose since it has to be updated constantly. But thx anyway

Flame Over a year ago

You probably have to assign a key="someidentifier" onto that test-table component such that it does not get re-used, which I believe is what's happening. Then, whenever the v-if triggers it to be shown, the component should trigger mounted again. But there are other roads towards a good solution.

Collectives™ on Stack Overflow

Vue.js component method on creation

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related