Блог

Главная - Вопросы по программированию - Как установить имя метода на основе значения Prop?

Как установить имя метода на основе значения Prop?

#javascript #vue.js #vue-component

#javascript #vue.js #vue-компонент

Вопрос:

Возможно ли установить имя метода в моем приложении Vue на основе значения prop? Итак, мое приложение Vue выглядит следующим образом:

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

Затем в моих методах я хочу назвать метод на основе значения идентификатора prop.

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

Возможно ли сделать что-то подобное, когда на имя метода влияет значение prop?

РЕДАКТИРОВАТЬ: причина, по которой я пытаюсь это сделать, заключается в том, что у меня есть компонент, который имеет фильтры ввода с флажками. Макет этого компонента всегда будет одинаковым, единственной разницей будут значения, присутствующие в этих флажках. Мне нужно отслеживать, какие флажки установлены независимо от каждого компонента. Итак, моя идея для этого — передать идентификатор prop для использования в качестве соглашения об именовании метода, в котором я сохраняю значение выбранных флажков для каждого компонента независимо в моем хранилище Vuex.

Комментарии:

1. зачем вам это делать? Просто используйте «идентификатор» там, где он вам нужен в методе

2. @Дерек Поллард Я пытаюсь использовать один компонент, который имеет аналогичный метод при каждом использовании этого компонента. Все это делается в попытке модулировать приложение Vue, которое будет использоваться в зависимости от обстоятельств. Идентификатор prop используется в методе только для имени этого метода. Идентификатор prop не используется ни для чего другого в этом конкретном методе.

3. Если оно используется только для имени метода, я бы поспорил, что тогда оно вам не понадобится

4. @DerekPollard Мне это нужно, чтобы имя метода могло быть уникальным на основе идентификатора prop для этого конкретного компонента. Таким образом, в моем хранилище Vuex я могу использовать уникальный метод.

5. итак, затем передайте это в свой коммит vuex в качестве аргумента

Ответ №1:

Вместо этого передайте его в качестве аргумента в ваше хранилище vuex:

 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>

Таким образом, вы не пытаетесь полагаться на динамические данные в своем статическом коде.