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

Question

使用 ListView 有效，但如果我在 child 组件中使用 v-for，则 view-recycling 不正确，因此在滚动后，v-for无法正确获取 re-rendered。

我的 parent 组件：

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

我的 child (post) 组件：

<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 中，因为单个 post 可以有一些样式化的内容。当我向下滚动并再次向上滚动时，第一个 post 得到 re-rendered，它显示 "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

Nativescript-Vue: How to use v-for inside of a ListView correctly

vue.js

nativescript

nativescript-vue