tdesign-mobile-vue icon indicating copy to clipboard operation
tdesign-mobile-vue copied to clipboard

[cell] cell组件中click传参数未更新

Open LoopZhou opened this issue 11 months ago • 4 comments

tdesign-mobile-vue 版本

1.1.0

重现链接

https://stackblitz.com/edit/gk4j3n-9ypxb5?file=src%2Fdemo.vue

重现步骤

参考重现示例中,testLog方法打印index, 当删除dataArr中一个数据中, cell的index未更新, tag组件正常更新

https://github.com/Tencent/tdesign-mobile-vue/assets/13745660/b899d1b4-cb73-410a-8239-25ab36cd7678

期望结果

cell组件click方法中参数更新

实际结果

cell组件click方法中参数未更新

框架版本

Vue(3.2.0)

浏览器版本

Chrome(117.0.5938.149)

系统版本

MacOS

Node版本

16.17.0

补充说明

No response

LoopZhou avatar Mar 04 '24 04:03 LoopZhou

👋 @LoopZhou,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Mar 04 '24 04:03 github-actions[bot]

tag 也有这个问题,看源码大概有 12 个组件有这个问题,全局搜下关键字 props.onClick 可以找到,将源码改为 context.emit 的方式也许可以修复。

临时解决可以通过将 key 绑定在 t-<name> 上解决。

<div v-for="(item, index) in list">
  <t-cell
    :key="item.name"
    :title="item.name"
    @click="testLog(index)"
  ></t-cell>
</div>

XBIsland avatar Mar 05 '24 16:03 XBIsland

 <div v-for="(item, index) in dataArr" :key="item.name">
    <t-cell note="辅助信息" @click="testLog(index)">
      <template #title>
        {{ item.name }}
      </template>
    </t-cell>
  </div>

自测过这样写就可以更新了,tag如果像之前cell这样的写法,用:content="item.name",也会更新不了,个人认为可以换成这种写法 @LoopZhou

catiwang avatar Mar 08 '24 07:03 catiwang

我尝试排查原因,最终发现跟 emits 声明和 props 定义有关。 应该跟组件本身无关,更多可能是 Vue 的写法有关,个人觉得是个值得讨论的问题。

emits👉: https://cn.vuejs.org/api/options-state.html#emits demo👉: https://stackblitz.com/edit/vitejs-vite-z7hfy7?file=src%2FApp.vue

我会尝试提交 PR 修复这个问题。

XBIsland avatar Mar 22 '24 10:03 XBIsland