Как я могу изменить цвет / backgroundColor элемента списка в nativescript-vue?

Я хочу обновить стиль выбранного элемента, когда пользователь нажимает на элементы. nextIndex / event.index обновляется, но стиль не применяется. Спасибо за вашу помощь.

https://play.nativescript.org/?template=play-vue&id=ihH3iO < / а>

export default {
  name: "CustomListView",
  props: ["page", "title", "items", "selectedIndex"],
  data() {
    return {
      nextIndex: this.selectedIndex ? this.selectedIndex : undefined
    };
  },
  methods: {
    onItemTap(event) {
      this.nextIndex = event.index;
    }
  }
};
.selected {
  color: white;
  background-color: black;
}
<ListView for="(item, index) in items" @itemTap="onItemTap">
    <v-template>
    <Label :class="['list-item-label', { selected: index == nextIndex }]" :text="item" />
    </v-template>
</ListView>


nativescript nativescript-vue
person Louis    schedule 30.07.2019    source источник
comment
можно ли создать детскую площадку?   -  person Narendra    schedule 31.07.2019
comment
@Narendra Я обновил вопрос, добавив URL-адрес игровой площадки, спасибо!   -  person Louis    schedule 31.07.2019

Ответы (1)


arrow_upward
3
arrow_downward

Дополнительная информация об этой проблеме.

Это ожидаемое поведение, потому что шаблон элемента ListView отображается и обновляется представлением списка при прокрутке (повторное использование представления), если вам нужно убедиться, что представление списка обновляется при изменении свойства, вызовите для него обновление.

Итак, решение


<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ListView v-for="(item, index) in items" @itemTap="onItemTap" ref="listView">
            <v-template>
                <Label :class="[{selected: index === nextIndex}, 'list-item-label']"
                    :text="item" />
            </v-template>
        </ListView>
    </Page>
</template>

<script>
    export default {
        name: "CustomListView",
        data() {
            let selectedIndex = 2;
            return {
                items: ["Bulbasaur", "Parasect", "Venonat", "Venomoth"],
                nextIndex: selectedIndex
            };
        },
        methods: {
            onItemTap(event) {
                this.nextIndex = event.index;
                this.$refs.listView.nativeView.refresh();
            }
        }
    };
</script>

Вам нужно обновить свой listView код, для этого this.$refs.listView.nativeView.refresh();

Не забудьте добавить ref на <ListView>

person Steven    schedule 31.07.2019
comment
Спасибо, Стивен, ваш код отлично работает. Однако я хотел бы спросить, есть ли какие-либо недостатки в принудительном обновлении списка при каждом нажатии. Как я обнаружил, этого также можно достичь с помощью itemLoading и установки cell.selectedBackgroundView.backgroundColor без обновления списка. - person Louis; 01.08.2019
comment
какой сюрприз! - person Николай; 01.08.2019
comment
Вы можете показать мне, где вы это нашли в itemLoading & setting the cell.selectedBackgroundView.backgroundColor? - person Steven; 01.08.2019
comment
@Steven Вот решение, которое я нашел. stackoverflow.com/questions/36335252 / - person Louis; 01.08.2019