Vue.js Nativescript Vue：如何在ListView内部正确使用v-for

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

我的孩子（职务）部分：

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

{{post.title}}
{{span.content}}

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

---

是重现问题的游乐场

我认为这个游乐场是解决您问题的解决方案：

我所做的是替换

格式化字符串

：

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

{{span.content}}

为此：

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

能否创建游乐场？FormattedString实际上是标签中的一个属性。我不知道如何在标签外声明它，请参考文档。@Manoj oops，想创建一个最小的示例，但在我的代码中，您在Android或iOS上有渲染问题吗？在我的项目中，我总是在iOS上呈现“动态”列表项时遇到问题，而在iOS上工作时却完美无缺Android@TomG我只使用android进行测试，可能应该提到，谢谢，对于未来的读者，这是nativescript vue 2.2中当前的一个bug，为此创建了一个github问题