Skip to content

【vue3+小程序】List虚拟列表增改不生效 #2239

Open
@bo-tea

Description

@bo-tea

NutUI scenes(nutui 场景)

小程序(@nutui/nutui-taro)

NutUI-vue version(nutui-vue 版本)

4.0.5

Vue version(vue 版本)

3.2.47

Operating environment(运行环境)

dev:weapp

Citation method(引用方式)

npm

Node version(node 版本)

19.7.0

Browser and its version(浏览器及其版本)

wechat

System and its version(系统及其版本)

windows10

Taro environmental information(taro 环境信息)

Taro CLI 3.6.2 environment info:
System:
OS: Windows 10
Binaries:
Node: 19.7.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Users\ttav\AppData\Roaming\npm\yarn.CMD
npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD

Reproduction link(重现链接)

codesandbox.io

Steps to reproduce(重现步骤)

拿官网文档的代码小改了下直接放上去了,对数组的增改不会触发列表的刷新,像是丢失了响应式,打印了下实际上响应式没丢。
尝试过用ref代替,结果一样,如果用普通的列表<li>进行数据绑定,效果是正常的。再吐槽下这个组件,真的难用,至少在小程序上是这样的,原版代码测试列表的显示都不正常,看了下已经有几个人开了issue了所以就不再开了。
Markdown不会用 见谅 下面是部分重点代码

    <nut-cell>
      <nut-list
          :height="50"
          :listData="state.count">
        <template v-slot="{ item, index }">
          <div class="list-item" @click="edit(index)">
            {{ index }}
          </div>
        </template>
      </nut-list>
    </nut-cell>
 <script setup>
import { onMounted, reactive } from "vue";
const state = reactive({
  count: new Array(10).fill(0),
});
const edit = (index) => {
  state.count.splice(index, 1);
};
onMounted(() => {
  state.count = state.count.map((item, index) => index + 1);
});
</script>

What is expected?(期望的结果是什么?)

正常增改,页面同步渲染。

What is actually happening?(实际的结果是什么?)

列表没有刷新

Metadata

Metadata

Assignees

No one assigned

    Labels

    reproducible提供了可复现代码,或者已验证可复现

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions