Push not updating array in DOM Vue

Question

I am using Vue and am trying to make live search. But on updating the content of search, it doesn't get updated.

Data do get update in array, when checked in dev tools. But DOM don't get updated.

template

<div class="dropdown">
    <input type="text" v-model="input" placeholder="Search" @keyup="searching" data-toggle="dropdown">
    <span class="caret"></span>
    <ul class="dropdown-menu">
      <li v-for="(data,index) in availSearchData" :key="index">
        <a href="#">{{data.name}}</a>
      </li>
    </ul>
  </div>

method

searching() {
  if (this.input) {
    let url = this.domain + "search";
    axios
      .get(url, {
        params: {
          table: this.table,
          data: this.input
        }
      })
      .then(res => {
        this.availSearchData = [];
        res.data.forEach(doc => {
          this.availSearchData.push(doc);
        });
      });
  }
}

I don't know where I am doing wrong. Please help out if possible.

In UI, I don't get anything.. In dev tools, after update wihen i give input 'salt': availSearchData:Array[1] 0:Object coid:4 name:"SALTS AND SUGAR" subcatid:"1" — user11024704
– user11024704, Commented Mar 13, 2019 at 15:53

Tunde Michael · Accepted Answer · 2021-03-15 20:30:07Z

4

To add an item to the back of an array and get it to be reactive in Vue, below is what worked for me:

this.$set(this.items, 
          this.items.length, 
          JSON.parse(JSON.stringify(this.item))
         );

The this.$set is Vue's inbuilt array manipulation function that guarantees reactivity. The this.items is the array, this.items.length (NOTE: it is items.length NOT items.length - 1) is to push a new index to the back of the array and finally, JSON.parse(JSON.stringify(this.item)) is to clone the this.item into a new object before pushing into the array. The cloning part may not be applicable to you and I used this in variables because all the variables are declared in my data() function.

answered Mar 15, 2021 at 20:30

Tunde Michael

3644 silver badges8 bronze badges

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

Comments

Ronin Kr · Accepted Answer · 2019-03-13 16:17:31Z

0

Use a computed property in your component and use that for parsing the template like this

<li v-for="(data,index) in availSearch" :key="index">
  <a href="#">{{data.name}}</a>
</li>

and computed property will be then

availSearch() {
  return this.availSearchData;
},

so this computed property always return the array if it is updated.

Also if your response is the array that you want to use exactly, try this

searching() {
  if (this.input) {
    let url = this.domain + "search";
    axios
    .get(url, {
      params: {
        table: this.table,
        data: this.input
      }
    })
    .then(res => {
      this.availSearchData = [];
      Vue.set(this, 'availSearchData', res.data);
    });
  }
}

answered Mar 13, 2019 at 16:17

Ronin Kr

1111 bronze badge

9 Comments

user11024704 Over a year ago

This worked amazingly, but i get this error Computed property "availSearch" was assigned to but it has no setter.

Ronin Kr Over a year ago

Do not set the values using "availSearch". This is just for reading the values.

user11024704 Over a year ago

I did not set using "availSearch"

Ronin Kr Over a year ago

Then probably please provide your code so that I can check how exactly you are using this

user11024704 Over a year ago

and when there's only one element in array. It shows nothing in UI

|

Lassi Uosukainen · Accepted Answer · 2019-03-13 16:20:03Z

0

Possible explanations for this might be:

You don't declare the property in the component and thus normal reactivity doesn't work.
You are using index as the key in your array. This might confuse the reactivity system, so it does not necessarily know if the item
changed. Try using the name of the item as the key instead.

answered Mar 13, 2019 at 16:20

Lassi Uosukainen

1,68815 silver badges22 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:06:00Z

0

Try calling your function from mounted hook. I think the problem is that you are trying to show data when the DOM is not rendered yet. By calling your function in mounted you get data back after DOM has been rendered.

mounted() {
    this.searching();
}

from Vue website "mounted: Called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called."

edited Jul 16, 2022 at 4:06

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 13, 2019 at 16:01

DjSh

2,7642 gold badges22 silver badges32 bronze badges

3 Comments

user11024704 Over a year ago

This worked, It did showed data.. but when there's only one element in array. It shows nothing

DjSh Over a year ago

change the :key="name". If mounted worked then the problem might be using the index as key

user11024704 Over a year ago

I can't actually, it contains duplicate data

Collectives™ on Stack Overflow

Push not updating array in DOM Vue

4 Answers 4

Comments

9 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

9 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related