How to make a computed property with an axios call return a value

Question

How to make a computed property with an axios call return a value

Navigation

#1 by (1 votes)

2

I have a property computed in the following way:

private get ChangeGroup(): IResults[] {
    Axios.get(process.env.VUE_APP_BASE_URI + 'results?GroupNumber='
    + this.selected,
    {withCredentials: true})
    .then(data => {
        this.items = data.data;
        let i = 1;
        this.items.forEach(
            (e: IResults) => {
                e.position = i;
                i++;
            }
        );
        return this.items; <----- 2
    })
    .catch(error => {return []}); <--- 1
}

It is written that way, because the application uses typescript, so it is necessary that the function returns something.

On the line marked 1, it returns empty.
In 2, it returns full.
But of course, the problem is that this call async automatically returns. So, how do you make this wait until the call really comes back, and have something to return?

typescript vue.js axios

asked by gbianchi 29.06.2018 в 20:56

source

1 answer

access properties of the class "Host" from grouped properties TPersistent How to merge multiple records into one using SQL SERVER?

score 1 · Accepted Answer

TL; DR;

It can not be done trivially. The computed properties are synchronized and run at the time they are needed, because VUE caches them so that they do not have to be recalculated if the variables they contain are reactive.

Explanation and alternatives

There is the component vue-async-computed , which allows you to use asynchronous computed variables. However, this method is not compatible with typescript, since it implies passing its definition to typescript, which is explained in the VUE manual.

But it is not explained by any way how to define a new type of internal declaration in the object model.

Therefore, although this object can be used without Ts, it does not work for this case.

The trivial solution is to use a watch, which controls the property that is being changed, and whose result is saved in another property, which can be changed asyncronically.

Evan explains in this thread that although this library is a good idea, and that could even be added in the framework, but then fall back on what would be too much base, which always tries to be clean, and let the library evolve on its own.

Add in a thread where the original author of the component is asked how to use this with Ts, a question to find out if they had managed to include this in a VUE class component.

The solution at this time, then it looks like:

public selected: number = 0;
....
@Watch ('selected')
private ChangeGroup() {
    Axios.get(process.env.VUE_APP_BASE_URI + 'results?GroupNumber='
    + this.selected,
    {withCredentials: true})
    .then(data => {
        this.items = data.data;
        let i = 1;
        this.items.forEach(
            (e: IResults) => {
                e.position = i;
                i++;
            }
        );
    });
}

Where selected is the reactive variable that triggers this event. In the example case (and here too) is the variable that is used to make the request. If it works for that matter, it's a change of selection in a combo.