当涉及到使用和更新React对象时,我似乎缺少了Vue组合API的一些东西。
请看下面的代码。当添加颜色时,我希望click事件更新模板中的{{colors}}
输出。
<template>
<div>
<!-- {{colors}} Is not updated in the DOM on click event -->
<pre>{{ colors }}</pre>
<button @click="addColor">add color</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
let colors = reactive({ green: '#ccc000' });
function addColor() {
// By cloning and creating a new merged object
colors = Object.assign({}, colors, { red: '#fff000' });
// Or by changing the object directly
colors.orange = '#322332'; // Also does not work
console.log(colors); // Logs out the correct value
}
return {
colors,
addColor,
};
},
};
</script>
我可以在控制台日志中看到颜色的值正在更新,但在DOM中没有。
下面是一个代码沙箱
https://codesandbox.io/s/mystifying-roentgen-rox9k?file=/src/App.vue
3条答案
按热度按时间r1zhe5dt1#
您可能不应该创建新对象:
相反,请尝试操作现有对象:
x8diyxa72#
你的颜色对象和函数应该是这样的
不要忘记从设置中返回颜色和addColor
在模板中添加
这应该行得通
nkhmeac63#
首先执行以下操作:
colors = Object.assign({}, colors, { red: '#fff000' });
你破坏了React
现在,这绝对合适的代码行
colors.orange = '#322332'
不起作用,因为React性已经丧失解决办法是--删除第一个尝试