Question

使用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>

例如，一条消息说“你好”和下一条“世界”都以v-for呈现，因为单个帖子可以包含某些样式化的内容。当我向下滚动并再次向上备份时，第一条帖子被重新渲染，显示为“ Hello World”，而不是所需的“ Hello”。

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

Answer 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：如何在ListView中正确使用v-for

1 个答案: