Get value in methods and display in Vue

Question

I'm working with code in vuejs :

created() {
    var id = this.id
    axios
      .get("/api/product" + id)
      .then((res) => {
        this.rows = res.data;

      })
      .catch((error) => {
        console.log(error);
      });
  },
 methods: {
  changeValue() {
    axios
      .get("/api/product" + id, {
        params: {
         status: this.status,
      },
       })
      .then((res) => {
        this.rows = res.data;

      })
      .catch((error) => {
        console.log(error);
      });
  }
}

template :

<v-select
   :options="options"
   v-model="status"
   @input="changeValue()"
/>

My problem is when i get the res.data in my methods this.rows = res.data. When i console.log(this.rows) it shows the correct result i want to display.But it still shows this.row in created().Is there a way to override this.rows in created()? Thanks

Answer 1

i think use mounted instead of created it's better load data when your component is ready so you can update DOM

you can check this answer Difference between the created and mounted events in Vue.js for more details

also you need a variable/computed options as seen in template :options=options

 computed: {
   options() {
      // you can restructure you rows data to match what v-select requires
      return this.rows
   }
 },

 mounted() {
    var id = this.id
    axios
      .get("/api/product" + id)
      .then((res) => {
        this.rows = res.data;

      })
      .catch((error) => {
        console.log(error);
      });
  },
}

Answer 2

Created mostly used for logic which needs to be executed once at creation of the Vue instance. For this problem i recommend mounted as well because as the vue lifecycle diagram shows it is going to re run on specific data changes. e.g you change a key value in template.

https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram