Vue 根据 Prop 值设置方法名？答案

【问题标题】：Vue Setting A Method Name Based on a Prop Value?Vue 根据 Prop 值设置方法名？
【发布时间】：2019-08-24 03:34:31
【问题描述】：

是否可以根据 prop 的值在我的 Vue 应用程序中设置 Method 的名称？所以我的 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 以用作方法的命名约定，在该方法中，我将每个组件的选定复选框的值独立地存储在我的 Vuex 商店中。

【问题讨论】：

您为什么要这样做？只需在方法中需要它的地方使用“标识符”
@Derek Pollard 我正在尝试使用一个组件，每次使用该组件时该组件都具有类似的方法。这一切都是为了根据情况对要使用的 Vue 应用程序进行模块化。唯一一次在方法中使用标识符 prop 是用于该方法的名称。标识符 prop 不用于该特定方法中的任何其他内容。
如果它只是用于方法的名称，我打赌你不需要它
@DerekPollard 我需要它，因此方法的名称可以根据特定组件的标识符 prop 是唯一的。这样我就可以在我的 Vuex 商店中使用独特的方法。
然后将其作为参数传递到您的 vuex 提交中

标签： javascript vue.js vue-component

【解决方案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>

这样，您就不会尝试依赖静态代码中的动态数据。

【讨论】：