键入'字符串'不可分配给类型'ComputedRef<字符串>'

Question

我的Vue应用程序中有这样的代码：我想做的是根据道具更改颜色属性。我也使用computed，因为颜色属性可能会在组件外部更改。

export default defineComponent({
name: 'mail-dropdown',
props: {
title: {
type: String,
default: '',
// required: true
},
id: {
type: String,
},
shade: {
type: String,
default: 'white',
},
grey: {
type: Boolean,
default: false,
// required: true
},
items: { type: Object as PropType<ActionItem[]> },
},
setup(props, context) {
const store = useCounterStore();
let color = computed(() => props.shade);
if (props.grey == true) {
color = 'grey-5';
};

return { store, color };
},
});

我这里有一个错误：

if (props.grey == true) {
color = 'grey-5';
};

错误如下：

> let color: ComputedRef<string> 
Type 'string' is not assignable to type 'ComputedRef<string>'.

更改color的解决方案是什么？

Answer 1

您错过了添加.value:

if (props.grey == true) {
color.value = 'grey-5';
};

但是计算属性应该是可写的，比如：

let color = computed({
get(){
return props.shade
},
set(val){
//emit the new val or mutate the store state
}
});