Qfyilyi

I'm trying to bind the text in a b-dropdown element to a value in the store. I tried binding to a computed property since the value in the store can change and the b-dropdown's text should change dynamically to reflect this change. I want to store the value in the store rather than as a data object because the value has to persist outside of the component where the b-dropdown exists.

Here's the b-dropdown element:

<b-dropdown v-bind:text="selectedSearchType" variant="outline-secondary">

  ...

</b-dropdown>

And the computed property

computed: {

  selectedSearchType: function() {

    return store.getters.getSelectedSearchType

  }

},

The getter

getSelectedSearchType: state => {

  return state.selectedSearchType

}

The state

state: {

 selectedSearchType: "Item",

 .....

}

I'm getting the following error:

[Vue warn]: Invalid prop: type check failed for prop "text". Expected String, got Function.

Instead if I do

<b-dropdown v-bind:text="selectedSearchType()" variant="outline-secondary">

I get

[Vue warn]: Error in render: "TypeError: Cannot read property 'selectedSearchType' of undefined"

How do I fix this to make the b-dropdown's text bind to the selectedSearchType ins the store?

Your best bet on binding to the store is to create a computed getter/setter and then use v-model in your input. That would look something like the following, you will have to adjust a little depending on your values.

This also assumes that b-dropdown is going to emit an input when the value changes.

<b-dropdown v-model="selectedSearchType" variant="outline-secondary">



computed: {

  selectedSearchType: {

    get() { 

      return //value from store 

    },

    set(val) {

      // set the value in the store

    }

  }

}