pass certain value dynamically to computed function in Vue.js

Question

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;
            }
        })
    },

I dont have any errors or problems. The thing is that im inexperienced and have no clue how to get what i want. As ur demo shows u got one selectbox right now for languages, let's say that i got another selectbox below that one for "active" instead "language_id". What i want is that i can use the vue function to apply to both of them, but thats not possible right now because as u can see the function is saying return language.id. but i want the return to change upon what selectbox has been touched. — Ser
– Ser, Commented May 28, 2021 at 8:25

tony19 · Accepted Answer · 2022-07-16 03:25:00Z

1

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

Create a data property (named "filterKey"):

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

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>

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

edited Jul 16, 2022 at 3:25

answered May 28, 2021 at 8:21

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

pass certain value dynamically to computed function in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related