CODEWITHSUNDEEP
laravelvue.jsvue-componentlaravel-8vuejs3
Ser
Ser

Reputation: 187

pass certain value dynamically to computed function in Vue.js

Im trying to pass an id with the v-model so i can pass that to my computed function. The purpose of my function is to dynamically filter a table without hardcoding the names in the function. The function has to be able to filter both select boxes.

my data is called guides, it has an title/active/language_id/group.

this is my html dropdown:

    <select v-model="filterResult" :id="language.id" class="select2-selection custom-select">
          <option value="">All</option>
          <option v-for="language in languages" v-bind:key="language.id" v-bind:value="language.id">{{ language.name }}</option>
    </select>

    <select v-model="filterResult" :id="active" class="select2-selection custom-select">
       <option value="">All</option>
       <option :value=1>Active</option>
       <option :value=2>Archived</option>
    </select>

Here is my computed function now, but as u can see the "language.id" is hard coded in but i want the function to read it out of <select>. what i tried is putting it in the :id="" but i have no idea to forward it to the function besides the v-model. Purpose of all this is so i can reuse the component without changing anything. So it has to be applied to both select boxes or even more in the future.

    filterCertainValue: function (evt) {
        if (!this.filterResult) return this.guides;
        return this.guides.filter(guide => {
            if (guide.language.id == this.filterResult) {
                return guide.language.id;
            }
        })
    },

Upvotes: 0

Views: 721

Answers (1)

tony19
tony19

Reputation: 138546

You could create a dynamic filter key that changes based on the last selected <select>:

  1. Create a data property (named "filterKey"):

    export default {
  data() {
    return {
      filterKey: null
    }
  }
}

  2. Add a change-event handler to each <select> to set filterKey to the desired key to use in the computed prop's filtering (e.g., language_id or active):

    <select @change="filterKey = 'language_id'">
  <!-- language_id options -->
</select>

<select @change="filterKey = 'active'">
  <!-- active options -->
</select>

  3. Update the computed prop's filter to use the filterKey:

    computed: {
  filterCertainValue() {
    if (!this.filterResult) return this.guides
                                                👇
    return this.guides.filter(guide => guide[this.filterKey] === this.filterResult)
  }
},

demo

Upvotes: 1

Related Questions