Utilizing data as a substitute when creating a SearchBar using Vue3

Question

Utilizing data as a substitute when creating a SearchBar using Vue3

My VueJs3 application has a search bar implemented using .filter(), and it seems to be working fine. However, when I try to pass the value from my methods to the template, an error occurs. My data becomes a proxy and I am unable to use it in that format.

Here is the code snippet:

<template>
  <div class="searchBar">
    <input type="search" v-on:change="filterList" />
    {{ search }}
  </div>
  <div id="listaDestaque" class="list">
    <div class="list-header">
      <p>Imagem</p>
      <p>Descrição</p>
      <p>Categoria</p>
      <p>Un</p>
      <p>Estoque</p>
      <p>Valor</p>
    </div>
    <div v-for="item in current_data">
      <div class="item-list">
        <img v-bind:src="item.attributes.image" class="item-image" />
        <p>{{ item.attributes.name }}</p>
        <p>{{ item.attributes['category-name'].name }}</p>
        <p>{{ item.attributes['unit-name'].name }}</p>
        <p>{{ item.attributes['quantity-in-stock'] }}</p>
        <p>{{ item.attributes.price }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import api from '../../services/axios.js';
import headers from '../../services/headers.js';

export default defineComponent({
  name: 'listaDestaque',
  data() {
    return { myList: [], search: '', filter: '', current_data: '' };
  },
  beforeMount() {
    api.get('/products/all', headers).then((response) => {
      this.myList = response.data.data;
      const filter = this.myList.filter((element) => element.attributes.highlight == true);
      this.current_data = filter;
    });
  },
  methods: {
    filterList() {
      this.$data.search = event.target.value;
      console.log(this.search);

      const myListArray = JSON.parse(JSON.stringify(this.myList));

      const filtered = myListArray.find(
        (element) => element.attributes.name == this.search
      );

      const filteredArray = JSON.parse(JSON.stringify(filtered));

      if (filtered) {
        this.current_data = filteredArray;
        console.log(this.current_data);
        console.log(filteredArray);
      }
    },
  },
});
</script>

<style scoped></style>

The section related to the search bar is between lines 2-5 and 35-65.

The output of console.log(filteredArray); on line 64 looks like this:

Proxy {id: '1', type: 'products', attributes: {…}, relationships: {…}}
[[Handler]]: Object
[[Target]]: Object
attributes: {name: 'Small Marble Chair', description: 'Nihil est dignissimos. Quia officia velit. Est aliquid eos.', quantity-in-stock: 12, price: 58.21, highlight: true, …}
id: "1"
relationships: {category: {…}, unit: {…}}
type: "products"
[[Prototype]]: Object
[[IsRevoked]]: false

An error occurs on lines 17-22 after utilizing the function filterList:

listaDestaque.vue:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'image')
    at listaDestaque.vue:17:42
    at renderList (runtime-core.esm-bundler.js:2905:26)
    at Proxy._sfc_render (listaDestaque.vue:24:11)
    at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5651:34)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5694:56)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:36)
    at flushJobs (runtime-core.esm-bundler.js:396:17)

javascript vue.js vuejs3

Answer 1

Answer №1

Changing a value to a proxy should not pose any problems.

The issue lies in the usage of

const filtered = myListArray.find(...)

. The result of the find method is either null or the first object in the array that matches your criteria. Hence, filteredArray will never contain an array. When this is passed to the template with a for in loop, the iterator will cycle through the properties of each object. For instance, at some point, item may become attributes, causing attributes.attributes to be undefined, resulting in an error when accessing attributes.attributes.image.

It seems you intended to use filter instead of find.

  const filtered = myListArray.filter(
    (element) => element.attributes.name == this.search
  );

This solution appears to be overly complex.

You can simplify it by using v-model for the search input and creating a computed dataset.

For example: (SFC)

<template>
  <div class="searchBar">
    <input type="search" v-model="search"/>
    {{ search }}
  </div>
  <table id="listaDestaque" class="list">
    <thead>
      <tr>
        <th>Description</th>
        <th>Category</th>
        <th>Stock</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in current_data">
        <td>{{ item.attributes.name }}</td>
        <td>{{ item.attributes['category-name'] }}</td>
        <td>{{ item.attributes['quantity-in-stock'] }}</td>
        <td>{{ item.attributes.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  
  const dataset = [
    {attributes:{name:"apple", "category-name":"fruit", "quantity-in-stock": 0.2, price: "$3.98"}},
    {attributes:{name:"pear", "category-name":"fruit", "quantity-in-stock": 2, price: "$1.98"}},
    {attributes:{name:"orange", "category-name":"fruit", "quantity-in-stock": 3, price: "$3.98"}},
    {attributes:{name:"iPhone", "category-name":"not fruit", "quantity-in-stock": 18, price: "$398.29"}},
  ]

  export default defineComponent({
    name: 'listaDestaque',
    data() {
      return { myList: [], search: ''};
    },
    beforeMount() {
      // simulated API call
      setTimeout(()=>{
        this.myList = dataset  
      }, 500);
    },
    computed: {
      current_data(){
        return this.myList.filter((element) => element.attributes.name.includes(this.search)) || [];
      }
    },
  });
</script>

Answer 2

Changing a value to a proxy should not pose any problems.

The issue lies in the usage of

const filtered = myListArray.find(...)

. The result of the find method is either null or the first object in the array that matches your criteria. Hence, filteredArray will never contain an array. When this is passed to the template with a for in loop, the iterator will cycle through the properties of each object. For instance, at some point, item may become attributes, causing attributes.attributes to be undefined, resulting in an error when accessing attributes.attributes.image.

It seems you intended to use filter instead of find.

  const filtered = myListArray.filter(
    (element) => element.attributes.name == this.search
  );

This solution appears to be overly complex.

You can simplify it by using v-model for the search input and creating a computed dataset.

For example: (SFC)

<template>
  <div class="searchBar">
    <input type="search" v-model="search"/>
    {{ search }}
  </div>
  <table id="listaDestaque" class="list">
    <thead>
      <tr>
        <th>Description</th>
        <th>Category</th>
        <th>Stock</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in current_data">
        <td>{{ item.attributes.name }}</td>
        <td>{{ item.attributes['category-name'] }}</td>
        <td>{{ item.attributes['quantity-in-stock'] }}</td>
        <td>{{ item.attributes.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  
  const dataset = [
    {attributes:{name:"apple", "category-name":"fruit", "quantity-in-stock": 0.2, price: "$3.98"}},
    {attributes:{name:"pear", "category-name":"fruit", "quantity-in-stock": 2, price: "$1.98"}},
    {attributes:{name:"orange", "category-name":"fruit", "quantity-in-stock": 3, price: "$3.98"}},
    {attributes:{name:"iPhone", "category-name":"not fruit", "quantity-in-stock": 18, price: "$398.29"}},
  ]

  export default defineComponent({
    name: 'listaDestaque',
    data() {
      return { myList: [], search: ''};
    },
    beforeMount() {
      // simulated API call
      setTimeout(()=>{
        this.myList = dataset  
      }, 500);
    },
    computed: {
      current_data(){
        return this.myList.filter((element) => element.attributes.name.includes(this.search)) || [];
      }
    },
  });
</script>

Utilizing data as a substitute when creating a SearchBar using Vue3

Answer №1

Similar questions

Transferring account information to a function call in the near-js-api

Pass along computed style data to the parent component in Vue.js

How can I extract data from the 'ngx-quill' editor when integrating it with a FormBuilder in Angular?

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Can you retrieve a reference/pointer to a specific property of an object in JavaScript?

Implementing a blur effect on a CSS loader

React Native, state values are stagnant

Menu icon in Next.js/React/Tailwind not triggering close action when clicked again, causing responsiveness issue

A simple method to obtain the ID of the element that has been clicked and save it in a variable to be utilized in a function responsible for

how to adjust the width of table columns dynamically using ng-repeat and AngularJS

Having an issue with retrieving value from a textfield in JavaScript

An easy way to attach a Contextmenu to a specific element

The crossIcon on the MUI alert form won't let me close it

The process of incorporating the dymo.framework into an Angular project

Strange problem encountered while using npm

Add characters to div using JavaScript

ReactJS Error: Attempting to access undefined property "updateNumber"

Image Carousel Extravaganza

make the chosen text appear on Internet Explorer

No information is being emitted by the subject