如何使用带有 JS switch 语句的动态顺风类并在 Vue 中正确传递它们? [英] How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?
问题描述
我是 Vue JS 的初学者，我正在尝试创建一个函数来为订单状态分配相应的颜色.我想使用 switch-statement 来实现这一点，它会获取订单状态的值并将其传递给 getStatusColour 函数()，如下所示:
const getStatusColour = (orderStatus) =>{让 statusColour = "";开关(订单状态){案例新":statusColour = "bg-green-100 text-green-900";休息;案件准备":statusColour = "bg-yellow-400 text-yellow-900";休息;案例准备好":statusColour = "bg-blue-200 text-blue-800";休息;案例已交付":statusColour = "bg-green-300 text-green-800";休息;案例失败":statusColour = "bg-red-400 text-red-900";休息;默认:statusColour = "bg-gray-100 text-gray-800";}返回状态颜色；}然后在 Index.vue 文件中我有 export default { getStatusColour }，我想这应该是一个错误.
然后在模板中我这样称呼它:
{{ order.status }}但我不断收到 Uncaught (in promise) TypeError: _ctx.getStatusColour is not a function 错误.我将不胜感激.
这里是整个 github 代码库.
utils/test.js
const getStatusColour = (orderStatus) =>{让状态颜色 = ''开关(订单状态){案例新":statusColour = 'bg-green-100 text-green-900'休息案例准备":statusColour = 'bg-yellow-400 text-yellow-900'休息案例准备好":statusColour = 'bg-blue-200 text-blue-800'休息案例已交付":statusColour = 'bg-green-300 text-green-800'休息案例失败":statusColour = 'bg-red-400 text-red-900'休息默认:statusColour = 'bg-gray-100 text-gray-800'}返回状态颜色}导出 { getStatusColour }App.vue
<div><div :class=getStatusColour(order.status)">这个 div 确实有正确的:`bg-green-100 text-green-900`<脚本>从'./utils/test'导入{getStatusColour}导出默认{数据() {返回 {命令: {状态:'新'，},}},方法: {获取状态颜色，},}
这是一个 github 存储库，显示您的代码到目前为止运行良好:https://github.com/kissu/so-compute-exported-function
我个人如何处理这种流程
callToAction.vue
<脚本>导出默认{道具: {颜色: {类型:字符串，默认值:'主要'，},变体:{类型:字符串，默认值:'启用'，},禁用:{类型:布尔型，默认值:假，},},数据() {返回 {呼吁采取行动: {类型:{基本的: {启用:'禁用:bg-primary-500 悬停:bg-primary-700 bg-primary-500 text-primary-500'，概述:'悬停:bg-primary-a12 text-primary-500'，反转:'text-primary-500'，},次要:{启用:'禁用:bg-secondary-500悬停:bg-secondary-700 bg-secondary-500 text-secondary-500'，概述:'悬停:bg-secondary-a12 text-secondary-500'，反转:'text-secondary-500'，},第三: {启用:'禁用:bg-tertiary-500悬停:bg-tertiary-700 bg-tertiary-500 text-tertiary-500'，概述:'悬停:bg-tertiary-a12 text-tertiary-500'，反转:'text-tertiary-500'，},蓝灰色:{启用:'禁用:bg-bluegray-500 悬停:bg-bluegray-700 bg-bluegray-500 text-bluegray-500'，概述:'悬停:bg-bluegray-a12 text-bluegray-500'，反转:'text-bluegray-500'，},错误: {启用:'禁用:bg-error-500 悬停:bg-error-700 bg-error-500 text-error-500'，概述:'悬停:bg-error-a12 text-error-500'，反转:'text-error-500'，},},},}} 然后，在其他页面/组件中调用它，例如:
或者让默认值使用 color="primary"、variant="enabled" 等等...
PS:在 props 中添加 validators 可能会很好，会更友好参与该项目的其他开发人员，找出可以传递的所有可能值.
I am a beginner to Vue JS and I'm trying to create a function for assigning corresponding colours to the order statuses. I would like to use switch-statement to achieve this, that would grab the value of order status and pass it to the getStatusColour function(), like this:
const getStatusColour = (orderStatus) => {
let statusColour = "";
switch (orderStatus) {
case "new":
statusColour = "bg-green-100 text-green-900";
break;
case "preparing":
statusColour = "bg-yellow-400 text-yellow-900";
break;
case "ready":
statusColour = "bg-blue-200 text-blue-800";
break;
case "delivered":
statusColour = "bg-green-300 text-green-800";
break;
case "failed":
statusColour = "bg-red-400 text-red-900";
break;
default:
statusColour = "bg-gray-100 text-gray-800"
}
return statusColour;
}
Then in the Index.vue file I have export default { getStatusColour }, I guess that's should be a mistake here.
And then in the template I call it like this:
<span :class="getStatusColour(order.status)">{{ order.status }}</span>
But I keep getting Uncaught (in promise) TypeError: _ctx.getStatusColour is not a function error. I'll appreciate any help here.
As shown in the MDN docs: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_named_exports
Here is the whole github codebase.
utils/test.js
const getStatusColour = (orderStatus) => {
let statusColour = ''
switch (orderStatus) {
case 'new':
statusColour = 'bg-green-100 text-green-900'
break
case 'preparing':
statusColour = 'bg-yellow-400 text-yellow-900'
break
case 'ready':
statusColour = 'bg-blue-200 text-blue-800'
break
case 'delivered':
statusColour = 'bg-green-300 text-green-800'
break
case 'failed':
statusColour = 'bg-red-400 text-red-900'
break
default:
statusColour = 'bg-gray-100 text-gray-800'
}
return statusColour
}
export { getStatusColour }
App.vue
<template>
<div>
<div :class="getStatusColour(order.status)">
This div do have the correct: `bg-green-100 text-green-900` on it
</div>
</div>
</template>
<script>
import { getStatusColour } from './utils/test'
export default {
data() {
return {
order: {
status: 'new',
},
}
},
methods: {
getStatusColour,
},
}
</script>
Here is a github repo to show that your code is working great so far: https://github.com/kissu/so-compute-exported-function
How I do personally handle this kind of flow
callToAction.vue
<button
class="flex items-center w-auto p-4 text-center ..."
:class="[
callToAction.types[color][variant],
{ 'opacity-50 cursor-not-allowed shadow-none': disabled },
]"
>
Nice flexible button
</button>
<script>
export default {
props: {
color: {
type: String,
default: 'primary',
},
variant: {
type: String,
default: 'enabled',
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
callToAction: {
types: {
primary: {
enabled: 'disabled:bg-primary-500 hover:bg-primary-700 bg-primary-500 text-primary-500',
outlined: 'hover:bg-primary-a12 text-primary-500',
reversed: 'text-primary-500',
},
secondary: {
enabled: 'disabled:bg-secondary-500 hover:bg-secondary-700 bg-secondary-500 text-secondary-500',
outlined: 'hover:bg-secondary-a12 text-secondary-500',
reversed: 'text-secondary-500',
},
tertiary: {
enabled: 'disabled:bg-tertiary-500 hover:bg-tertiary-700 bg-tertiary-500 text-tertiary-500',
outlined: 'hover:bg-tertiary-a12 text-tertiary-500',
reversed: 'text-tertiary-500',
},
bluegray: {
enabled: 'disabled:bg-bluegray-500 hover:bg-bluegray-700 bg-bluegray-500 text-bluegray-500',
outlined: 'hover:bg-bluegray-a12 text-bluegray-500',
reversed: 'text-bluegray-500',
},
error: {
enabled: 'disabled:bg-error-500 hover:bg-error-700 bg-error-500 text-error-500',
outlined: 'hover:bg-error-a12 text-error-500',
reversed: 'text-error-500',
},
},
},
}
}
</script>
Then, call it in other pages/components with something like:
<call-to-action color="tertiary" variant="reversed"></call-to-action>
Or let the defaults do it's job with color="primary", variant="enabled" and so on...
PS: adding validators to props could be nice, will be more friendly for the other developers working on the project, figuring out all the possible values that can be passed.
这篇关于如何使用带有 JS switch 语句的动态顺风类并在 Vue 中正确传递它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
