Cocos Creator 插件开发中使用的官方组件ui-file遇到的重置invalid无效状态问题

[jerrychoux]

Cocos Creator version

3.8.3

System information

windows10, macOS15.4.1

Issue description

在vue3中使用ui-file做文件选择

const invalid = computed(() => !props.data)
const scriptInvalid = computed(() => invalid.value || !terminal.value)
const scriptValue = computed(() => (scriptInvalid.value ? '' : props.data?.script ?? ''))
<ui-file
  ref="scriptRef"
  slot="content"
  :value="scriptValue"
  :disabled="scriptInvalid"
  extensions="js,cjs,mjs"
  :placeholder="getI18n('config_section_script_placeholder')"
  @confirm="handleScriptConfirm"
></ui-file>

在测试时故意手动输入错误的路径，比如‘c’，会正常出现invalid的黄色框无效状态。 这时外部更新数据，给scriptValue的值是个‘’空字符串，这个组件的invalid无效状态没有消失，必须scriptValue的值是个有效的路径，比如‘\’或‘c:\’，无效的黄框状态消失，然后再设置空字符串才达成原先想直接设置空字符串的数据更新效果。 后来摸索到添加代码

watch(
  () => props.data,
  () => {
    scriptRef.value.value = '\\' 
  }
)

由于watch会执行在computed之前，故也达成了设置新的空字符串前先清理无效状态的目的，但这样操作并不优雅。 不知这个现象是个Bug，还是另外有官方正确的使用方式。

Relevant error log output

No response

Steps to reproduce

如前面描述所示

Minimal reproduction project

No response

[yufengctbu]

你好，很高兴您在使用的过程中把相关的问题反馈给我们，我在收到这个反馈的时候进行了排查，根据上述所描述我进行了复现，并且找到了相关的原因，

• 表现: ui-file 无法响应 vue 中 value 属性的变化
• 原因: 严格来讲这个是组件编写的问题，并且这个问题在比较早的时候我们已经发现并且记录了它，由于 ui-file 里面内置了 ui-input 组件，在 ui-input 组件变化时，没有及时的同步数据到 ui-file 外层属性上导致的问题，初始时设置了 value 为 scriptValue， 当通过手动输入 c 时它验证是 invalid 这时未改变 ui-file 上的 attribute value， 当 scriptValue 再次设置为空字符串时，webcomponent 组件获取到重新赋值的 value 与原 attribute 上的value 是一致的，因此没有进行更新，我们尝试过修复它，但是这样会改变这个组件的结构，会影响到现版本组件的表现，因此我们计划在大版本上进行调整和修复
• 解决方案 ：目前来讲你的这个方式虽不优雅，但也是一个比较好的解决方案，在 3.8.7版本，倒是可以使用 scriptRef.value.setAttribute('value', newValue) 这样设置