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

Использование 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 - игровая площадка для воспроизведения проблемы


nativescript vue.js nativescript-vue
person Nais_One    schedule 26.06.2019    source источник
comment
Можете ли вы создать детскую площадку?   -  person Steven    schedule 26.06.2019
comment
FormattedString на самом деле является атрибутом внутри Label. Я не уверен, как вы можете объявить это вне лейбла, обратитесь к документации.   -  person Manoj    schedule 26.06.2019
comment
@Manoj ой, хотел создать минимальный пример, но в моем коде он есть   -  person Nais_One    schedule 26.06.2019
comment
У вас проблемы с рендерингом на Android или iOS? В моих проектах у меня всегда были проблемы с рендерингом элементов динамического списка на iOS, при этом я работал безупречно на Android.   -  person TomG    schedule 26.06.2019
comment
@TomG Я тестирую только с android, возможно, следовало упомянуть, что   -  person Nais_One    schedule 26.06.2019
comment
@Steven, я попытался максимально четко воспроизвести это здесь, play.nativescript.org/?template = play-vue & id = izWGL9. просто прокрутите сверху вниз и снова вернитесь, и вы увидите, что их больше, чем раньше.   -  person Nais_One    schedule 29.06.2019
comment
@Nais_One Я знаю эту проблему, потому что иногда будет отображаться 2 или 3 элемента, поэтому остальные остаются   -  person Steven    schedule 01.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, эта игровая площадка - решение вашей проблемы: 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>
person Steven    schedule 01.07.2019
comment
Спасибо, для будущих читателей, в настоящее время это ошибка в nativescript-vue 2.2, и для этого была создана проблема с github. - person Nais_One; 02.07.2019