vue-点击生成动态值，动态渲染回显输入框

1.前言

动态点击生成数值，回显输入框，并绑定。

2.实现

<template><div style="display:flex;align-items: center;flex-direction:row"><a-input:key="inputKey"v-model="uploadData[peo.field]"placeholder="回显"disabled/><a-button type="primary" @click="workNumProduce">点击生成</a-button></div>
</template><script>
export default {data() {return {uploadData: {// 假设peo.field是'workNum'workNum: ''},peo: {field: 'workNum'},inputKey: Date.now() // 初始key值};},methods: {workNumProduce() {// 生成工号逻辑，这里只是一个示例const workNum = 'G' + Math.floor(Math.random() * 1000000);this.uploadData[this.peo.field] = workNum;this.inputKey = Date.now(); // 更新key值，强制刷新<a-input>}}
};
</script>

当key的值发生变化时，Vue会重新渲染该组件。将key绑定到一个动态的值，例如一个时间戳，这样每次点击按钮时，key的值都会更新，从而强制刷新<a-input>组件。

3.强制刷新this.$forceUpdate()

vue-强制更新组件this.$forceUpdate()-CSDN博客文章浏览阅读244次。强制更新组件this.$forceUpdate()https://blog.csdn.net/2301_76671906/article/details/145563122?fromshare=blogdetail&sharetype=blogdetail&sharerId=145563122&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link