Nativescript-Vue：如何在 ListView 中正确使用 v-for

Posted 2023-04-14

【中文标题】Nativescript-Vue：如何在 ListView 中正确使用 v-for

【英文标题】：Nativescript-Vue: How to use v-for inside of a ListView correctly

【发布时间】：2019-11-08 11:47:44

【问题描述】：

使用 ListView 有效，但是如果我在子组件中使用 v-for，则视图回收不正确，因此滚动后，v-for 无法正确重新渲染。

我的父组件：

<ListView for="post in computedPosts">
   <v-template>
     <Post :post="post" ></Post>
   </v-template>
</ListView>

我的孩子（帖子）组件：

<FlexboxLayout>
   <Label> post.title </Label>
   <Label>
     <FormattedString>
       <Span v-for="(span, spanIndex) in post.spans">
         span.content 
       </Span>
     </FormattedString>
   </Label>
</FlexboxLayout>

例如，一条消息说“Hello”，下一条消息是“World”，两者都在 v-for 中呈现，因为单个帖子可以包含一些样式化的内容。当我向下滚动并再次向上滚动时，第一篇文章被重新渲染，它显示“Hello World”而不是所需的“Hello”。

https://play.nativescript.org/?template=play-vue&id=izWGL9 是重现问题的游乐场

【问题讨论】：

你能创建一个游乐场吗？

FormattedString 实际上是Label 中的一个属性。我不确定您如何在标签之外声明它，请参阅文档。

@Manoj 哎呀，想创建一个最小的例子，但在我的代码中，它在那里

您是否在 android 或 ios 上遇到了渲染问题？在我的项目中，我总是在 iOS 上渲染“动态”列表项时遇到问题，而在 Android 上却可以完美运行

@TomG 我只用android测试，也许应该提到

【参考方案1】：

我认为这个游乐场是您问题的解决方案： https://play.nativescript.org/?template=play-vue&id=izWGL9&v=2

我所做的是替换了FormattedString:

<FlexboxLayout>
    <Label>
         <FormattedString>
           <Span v-for="(span, spanIndex) in post.spans">
             span.content 
           </Span>
         </FormattedString>
       </Label>
</FlexboxLayout>

到这里：

<FlexboxLayout flexDirection="column" v-for="(span, spanIndex) in post.contents":key="spanIndex">
        <Label textWrap="true" :text="span" class="content-span"></Label>
</FlexboxLayout>

【讨论】：

感谢您，对于未来的读者，这目前是 nativescript-vue 2.2 中的一个错误，为此创建了一个 github 问题