Question

是否可以基于prop的值在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)
    }
  }

在property值影响方法名称的情况下，是否可以这样做？

编辑：我尝试执行此操作的原因是，我有一个具有复选框输入过滤器的组件。该组件的布局将始终相同，唯一的不同是这些复选框上显示的值。我需要跟踪独立于每个组件选择哪个复选框。因此，我的想法是传递一个标识符prop用作该方法的命名约定，在该方法中，我将每个组件的所选复选框的值独立存储在我的Vuex存储中。

Answer 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>'
});

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

Vue是否基于属性值设置方法名称？

1 个答案: