[Vuejs]-How to modify an object after axios get request is resolved

by

0👍

Instead of using two .then, use only one and execute all your code inside the arrow function, like this:

methods: {
    searchContainers(containerSearch) {
        this.containerQuery = JSON.parse(containerSearch.container_query)[0];
        this.imageBranch = JSON.parse(containerSearch.container_query)[1];
        this.containerInfo["image_branch"] = this.imageBranch
        this.url = this.containerQuery.split('/');

        axios.get(`http://localhost:8000/get?name=${this.url[0]}/${this.url[1]}/${this.url[2]}&ver=${this.url[3]}`)
            .then(res => {
                this.containerInfo = res.data;
                this.containerInfo = [...this.containerInfo, this.imageBranch]
            });

    }

0👍

I recommend using await/async syntax which is clear and straightforward. So the codes should be like this 

async searchContainers() {
  const res = await axios.get(`http://localhost:8000/get?name=${this.url[0]}/${this.url[1]}/${this.url[2]}&ver=${this.url[3]}`);
  this.containerInfo = res.data;
  this.containerInfo = [...this.containerInfo, this.imageBranch];
}

0👍

I figured it out. Needed to set a key in object as such: this.containerInfo.image_branch = this.imageBranch

Leave a comment