ERROR: Invalid assignment target：v-model中使用可选链操作符报错。

环境 ： vue 3

一、报错：ERROR: Invalid assignment target

在vue3中使用element的table中插入插槽并展示 rate 时，在v-model中使用了 可选链操作符。

导致报错。ERROR: Invalid assignment target

 

二、原因

首先解析一下，RROR: Invalid assignment target情况：

1.对只读属性或只读变量进行赋值：JavaScript 中有一些属性或变量是只读的，不能被重新赋值。如果你试图对只读属性或只读变量进行赋值操作，就会出现 "Invalid assignment target" 错误。

2.对不允许赋值的表达式进行赋值：有些表达式是不允许被赋值的，比如函数调用、数值、布尔值等。如果你试图对不允许赋值的表达式进行赋值操作，也会导致出现 "Invalid assignment target" 错误。

3.对解构赋值中的目标进行错误的赋值：解构赋值是一种将数组或对象的属性值解构到变量中的语法。如果你对解构赋值的目标进行错误的赋值操作，比如尝试给非变量进行赋值，就会触发 "Invalid assignment target" 错误。

在本次的报错中，属于第二种情况，Vue 3 的指令表达式中不支持直接使用可选链操作符来对属性进行可选链操作。可选链操作符只能用于对变量或对象的属性进行访问，而不能在表达式中的赋值操作中使用。

三、解决

确保目标为可写存在的变量，或者使用条件语句来规避使用可选链操作符即可。

正常显示：