0%

vue2.0 组件复用 数据没有更新

如果开发过程中出现使用v-if-else来切换组件时发现数据没有更新,那么就是因为元素被复用具体可以参考vue官网-组件

1
2
3
4
5
6
<template v-if="loginType === 'username'">
<input placeholder="Enter your username">
</template>
<template v-else>
<input placeholder="Enter your email address">
</template>

查看input元素发现只有input的placeholder的变化了 元素本身就没有改变,而且输入的值也没有被清除;原因是vue为了尽快的渲染页面所以通常会复用已经渲染的元素,所以会导致绑定的数据并没被实时刷新;
解决办法就是:对复用的元素添加 key

1
2
3
4
5
6
<template v-if="loginType === 'username'">
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<input placeholder="Enter your email address" key="email-input">
</template>

这样就避免了数据没有刷新的问题

------ 本文结束------