[Vuejs]-What is happening with this search filter in Vue 2?. Cant render items?

by

0👍

✅

Full Answer:

The problem with the code is that you are using the item index within function ‘changeDefault’, you should instead use the name of the item, because the index is dynamic, so if you search for ‘Text 2’, the index that would be used is 0, and not 1:

function changeDefault(clickedItem) {
  
      let indexOfDefaultTrue   = items.findIndex((item) => item.default === true);
      let indexOfbuttonClicked = items.findIndex((item) => item.name === clickedItem.name);

      items[indexOfDefaultTrue].default = false;
      items[indexOfbuttonClicked].default = true;

    }

And the input radio:

   <input
            type="radio"
            :checked="item.default"
            @click="changeDefault(item)"
          />

Linked to the code:
https://sfc.vuejs.org/#eNqtVMFuozAQ/ZWRLyFSCurunrKh2lX3UqnSXnqre3BhaGjBRrZJEyH+fcc2BGi36qUgJcx45nnmzbM79rtp4kOLbMt2JtNlY8GgbZsrLsu6UdpCBxqLDf2IzJYH3ECm6qa1mEMPhVY1rCh9xSWXmZLGQmmxNpCeE6J7LsE/3fgBkGMh2spuweoWN5Nfihq3sLrDo4VLAg3e/hzxP4hCVOYjjG9fgPH9CzB+vMN4WI+EGRQ623vGimi1Wv+cuCzKyqLG/GbgdKQ+KlpJ5CoZrUMp065lAVFAjA+ianEICI+m0WoZRhQH8Chy1hrSq3ngIjR2ncRW3apX1NfCYLSOa2Gz/XIjqntM7iejByRaPipiCuOyJ0bcO/YG2V7IJ/wT+I2yqsxeAhVvmq6QVCdzPP4thuA7UhUtpOdOZX7jAmbN+saG2UGapl6JU9kzzMfWWiWvw/afYzqyPOCsYO8Mgx2m5DDu3xf9MJUU9HQuaJGxKGme45o4b0OccrlLwrGmA00GgTSVsEhW4K/rFhrrKWeuJtiVkhQHh4ta5VilnIWRcwaVePSOW6VeoFDa6z2OY84Sj+6z8/JAubRKgZ6nTWB1TX9LdXN2zhryjD1VSHl5aajmEx2wCo+LsLG8uQfAnhqXpkVeKs6Wa9tsj44zWp8L4G3YLz87ClpK0A96GTv16svZX1513UwHfb9LyDfrLKHWJn4Gy41pNprpZRsWruGLWjTxs1GSLuog/mGBiNuOp4szuoqdzdne2sZsk8QUmbven02s9FNCX7FupS1pUmjqi0etXg1qAg5duVPI+n9gVOSo

👤Adam Edney

1👍

It sounds like ‘filteredItems’ is not reactive, is it a computed function? As it sounds like it’s not rerunning every time ‘this.search’ is changing.

If you have a larger example of the code, I can take a look.

👤Adam Edney

Leave a comment