[Vuejs]-Cant store api data called by axios in array through mounted, unless clicking on <Root> element from vue devtools (in browser)

by

1👍

As I mentioned in the comments on your question, this is an error I cannot seem to understand how you are getting. I sense there is information that we are not being presented with.

As such, here is a quick “working” example of fetching items from the mounted lifecycle hook in a component. Note: If you are creating the component via a Single-File Component (.vue files) then don’t worry too much about the declaration, pay attention only to the data and mounted methods. 

const App = Vue.component('App', {
  template: `<div>
    <input v-model="searchTerm" type="search">
    {{items.length}} results fetched
  </div>`,
  data() {
    return {
      searchTerm: '',
      items: []
    }
  },
  mounted() {
    //Timeout used to mimic axios query
    setTimeout(()=> this.items= [1,2,3,4], 1000)
  }
});

const app = new App({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">Placeholder</div>

Edit

The code you have given us after your update seems to be working just fine. See the below snippet.

I noticed you are looping over suggestions but that value is never updated anywhere in your given code.

const vueApp = new Vue({
  el: "#pos",
  data: {
    searchTerm: "",
    allProducts: [],
    selectedProducts: [],
    suggestions: []
  },
  mounted: function() {
    setTimeout(() => this.allProducts = [1,2,3,4,5], 1000);
  },
  methods: {
    select(item) {
      this.selectedProducts.push(item);
      this.suggestions = [];
    }
  },
  computed: {
    matches() {
      if (!this.searchTerm) return;
      this.suggestions = this.allProducts.filter(sP => (sP.prod_name).includes(this.searchTerm));
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="pos">
  <input type="text" v-model="searchTerm">
  <ul v-for="match in suggestions">
    <li @click="select(match)">
      {{match.prod_name}}
    </li>
  </ul>
  {{allProducts.length}} results loaded
</div>
👤Jhecht

0👍

mounted: function(){
      var _self = this;
       axios.get("api/products").then( res => _self.allProducts = res.data );
     }
👤ho raj

Leave a comment