Vue Установка имени метода на основе значения проп? - PullRequest
Новая
       2

Vue Установка имени метода на основе значения проп?

0 голосов
/ 02 апреля 2019

Можно ли установить имя метода в моем приложении Vue на основе значения проп?Поэтому мое приложение Vue выглядит следующим образом: 

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

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

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

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

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

1 Ответ

0 голосов
/ 02 апреля 2019

Вместо этого передайте его в качестве аргумента вашему магазину 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>

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

...