Nativescript-Vue: как правильно использовать v-for внутри ListView - PullRequest
Новая
       18

Nativescript-Vue: как правильно использовать v-for внутри ListView

2 голосов
/ 26 июня 2019

Использование 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».

https://play.nativescript.org/?template=play-vue&id=izWGL9 игровая площадка для воспроизведения вопроса

1 Ответ

1 голос
/ 01 июля 2019

Я думаю, что эта площадка - решение вашей проблемы: 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>
...