How to pass a function with a parameter to v-select?

Question

How to pass a function with a parameter to v-select?

Tried to do it this way, but nothing works...

I tried doing it through template, but it didn't work either. Maybe I'm doing something wrong.

I need one v-select to display all dir from the data array, and the second v-select to display all devices from the same object depending on the selected dir.

<template>
  <div>
    <b-card>
      <b-card-title>Logs</b-card-title>
      <b-row align-v="center">
        <b-col md="2">
          <v-select v-if="dirs" v-model="dir" :options="dirs" />
        </b-col>
        <b-col md="2">
          <v-select
            v-if="data"
            v-model="device"
            label="name"
            :items="data"
            item-value="dir"
            dense
            outlined
            return-object
            v-on:change="getDevices"/>
        </b-col>
      </b-row>
      <b-row>
        <b-button variant="primary" class="mt-1 float-right">Update</b-button>
      </b-row>
    </b-card>
  </div>
</template>
<script>
import { BCard, BCardTitle,BButton, BRow, BCol } from "bootstrap-vue"
import vSelect
from "vue-select"

export default {
  components: {BCard, BFormTextarea, BCardTitle, BButton, BRow, BCol, vSelect,},
  data() {
    return {
      logs: null,
      data: [{dir: '/var/log/test1',devices: ['a','b','c']},
             {dir: '/var/log/test2',devices: ['a','b','c']}],
      dirs: [],
      dir: null,
    }
  },
  methods: {
    getDevices(type) {
      let devices = this.data.filter((val)=> {
        return val.dir == type
      });
    },
  },
};
</script>

The code I tried is above. The data is not displayed, no errors.

Answer 1

You can try the function.bind() method, which creates a new function, that when you call this new function, it calls the original function with two key aspects controlled:

this Context: You can specify the value of this that the original function will use when called (i.e. with the object's properties or methods).

Pre-filled Arguments (Optional): You can provide additional arguments that will be pre-filled before calling the function.

1. bind it to the object:

const module = {
  x: 42,
  getX: function () {
    return this.x;
  },
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// Expected output: 42

*example from MDN

2. Pre-filled Arguments: set the bonded object to null and assign your arguments, this way when the function will be called in the future - it will be called with the assigned arguments:

function foo(a, b){ console.log(a, b)};

...

<button onClick={foo.bind(null, 'hello ', 'world')}>{'Check'}</button>

// log: hello world
* if not set to null, it will bind to the button

Note:

• .bind() creates a new function, it doesn't modify the original one.
• Binding with null prevents a specific this context and allows partial application using the remaining arguments list.
• Arrow functions do not have their own this context; they inherit this from the surrounding lexical context at the time they are defined.. Thus, using .bind() on an arrow function only sets its arguments and does not affect this.