Vue Setting A Method Name Based on a Prop Value?

Question

Is it possible to set the name of a Method in my Vue application based on the value of a prop? So my Vue Application looks like:

<script>
export default {
  name: 'CheckboxFilter',
  props: {
    tax: '',
    identifier: 'Category'
  }
}
</script>

Then in my Methods I want to name a method based on the value of the identifier prop.

methods: {
    updateSelected + this.identifier (e) {
      this.$store.commit('updateSelectedCategories', e.target.value)
    }
  }

Is something like this possible to do where the name of the method is influenced by the value of a prop?

EDIT: the reason why I am trying to do this is I have a component that has checkbox input filters. The layout of this component will always be the same the only difference will be the values present on those checkboxes. I need to keep track of which checkboxes are select independently from each component. So my thought for doing this is to pass an identifier prop to use as a naming convention for the method where I store the value of the selected checkboxes for each component independently in my Vuex store.

Answer 1

Instead, pass it as an argument to your vuex store:

 const store = new Vuex.Store({ state: { attribute: { tag: true, bag: false } }, mutations: { setAttr(state, { value, attribute }) { state.attribute[attribute] = value; } } }); Vue.component('custom-checkbox', { props: ['attribute'], template: '<div><input type="checkbox" v-model="checkBox">{{attribute}}</div>', computed: { checkBox: { get() { return this.$store.state.attribute[this.attribute] }, set(value) { this.$store.commit('updateMessage', { value, attribute: this.attribute }); } } } }); new Vue({ el: '#app', store, template: '<div><custom-checkbox attribute="tag" /><custom-checkbox attribute="bag" /></div>' });

 <html> <body> <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script> </body> </html>

That way, you're not trying to rely on dynamic data in your static code.

Vue Setting A Method Name Based on a Prop Value?

Question

1 answers

solution1
0 2019-04-02 18:37:59

Vue Setting A Method Name Based on a Prop Value?

Question

1 answers

solution1 0 2019-04-02 18:37:59

solution1
0 2019-04-02 18:37:59