Vuejs 像纯 JS 一样将参数从 body 传递到函数

Question

我正在尝试将一个参数传递给我进入我的视图的函数，以便运行对所述函数进行编码。

目前我有 5 个函数，它们基本上都做同样的事情，我正在尝试将它们重构为 1 个，它采用我传递的值并执行一些逻辑。解释我想用代码做什么可能更容易。

这是我当前的代码：

<v-card-text :class="darkBodyPurpleCardClassFix">Manage</v-card-text>
<v-card-text :class="lightBodyPurpleCardClassFix">Fees</v-card-text>

然后这里是 computed 下绑定到 class 的两个函数：

lightBodyPurpleCardClassFix(){
  switch (this.$vuetify.breakpoint.name) {
    case 'xs': return '450px';
    case 'sm': return this.mediumLightPurpleBodyCLassList;
    case 'md': return this.mediumLightPurpleBodyCLassList;
    case 'lg': return this.largeLightPurpleBodyCLassList;
    case 'xl': return this.largeLightPurpleBodyCLassList;
  }
},
darkBodyPurpleCardClassFix(){
  switch (this.$vuetify.breakpoint.name) {
    case 'xs': return '450px';
    case 'sm': return this.mediumDarkPurpleBodyClassList;
    case 'md': return this.mediumDarkPurpleBodyClassList;
    case 'lg': return this.largeDarkPurpleClassList;
    case 'xl': return this.largeDarkPurpleClassList;
  }
},

我想做的是只传递一些参数，然后在函数中使用这些参数。沿着这些线

<v-card-text :class="classFix(purple, light)">Manage</v-card-text>

然后在 function 中使用它们，如下所示：

classFix(color, value ){
 doSomethingWithColor(color);
 this.data = value;
};

color 和 value 是我将输入到我自己的代码中的参数，这样我就可以调整 class 列表，所有这些都包含 1 个函数，而不是我现在拥有的少数几个。

编辑：这是一些 data 元素的样子：

mediumPurpleCreateClassList: ['body-2', 'pb-3', 'pt-2', 'px-2', 'my_dark_purple_section'],
largePurpleCreateClassList: ['subheading', 'pb-3', 'pt-2', 'px-2', 'my_dark_purple_section'],

我想做的就是将函数 medium & purple & create 传递给函数，然后运行我对这些论点的逻辑。

Answer 1

您可以创建如下方法：

methods: {
    // ...
    classFix(darkOrLight, color) {
        switch (this.$vuetify.breakpoint.name) {
            case 'xs': return '450px';
            case 'sm': return this['medium' + darkOrLight + color + 'ClassList'];
            case 'md': return this['medium' + darkOrLight + color + 'ClassList'];
            case 'lg': return this['large' + darkOrLight + color + 'ClassList'];
            case 'xl': return this['large' + darkOrLight + color + 'ClassList'];
        }
    }
}

并在模板中使用（绑定）如下：

<v-card-text :class="classFix('dark', 'purple')">Manage</v-card-text>
<v-card-text :class="classFix('light', 'purple')">Fees< /v-card-text>

推理：

此替代方案利用了 JavaScript's property accessor syntax。

基本上，任何属性都像：

this.mediumLightPurpleBodyCLassList

可以通过以下方式访问：

this['mediumLightPurpleBodyCLassList']

注意 [ 和 ] 之间的是字符串。作为字符串，您可以使用任何变量：

var myField = 'mediumLightPurpleBodyCLassList';
this[myField];

并且 create/manipulate 无论如何你都会使用任何常规字符串变量的变量：

var myColor = 'LightPurple';
var myField = 'medium' + color + 'BodyCLassList';
this[myField];

并且，在上面建议的 classFix 方法中，这些变量是函数参数（归根结底，它们是局部变量）。

Vuejs 像纯 JS 一样将参数从 body 传递到函数

Vuejs pass arguments from body to function like pure JS

vue.js

vuetify.js

推理：