在 NativeScript-Vue ListView 中管理组件状态答案

【问题标题】：Managing component state in NativeScript-Vue ListView在 NativeScript-Vue ListView 中管理组件状态
【发布时间】：2019-12-24 10:48:54
【问题描述】：

我在 NativeScript-Vue ListView 中管理组件状态时遇到问题。我在以下文章中遇到了完全相同的问题：https://www.nativescript.org/blog/managing-component-state-in-nativescript-listview。文章不解释 Nativescript-Vue 的解决方案。我在我的 ListView 中使用 Switch 组件来保持列表项的状态，无论它们是否被选中，但没办法。有没有人遇到同样的问题并应用了 NativeScript-Vue 文章中的解决方案？

【问题讨论】：

标签： listview nativescript-vue

【解决方案1】：

实际上很容易修复。由于列表视图重用组件，我们不应该在组件本身内部设置数据。我们应该做的是添加/更改数组中对象内的数据，以便列表视图可以正确更新项目。

您可以添加一个在父级上触发的事件，以通过点击更新开关更改的列表来执行此操作，因为每次重新渲染/重用列表视图中的组件都会触发开关更改事件。这有点难以管理，但确实有效。

<Template>
  <StackLayout @tap="onSwitchTapped" orientation="horizontal">
     <Switch :isUserInteractionEnabled="false" v-model="item.isActive"/>
  </StackLayout>
</Template>
<Script>
   export default {
      props: {
           item: null,
           onItemUpdated: null
      }
      methods: {
         onSwitchTapped()
         {
             this.item.isActive = !this.item.isActive;
             if(onItemUpdated != null)
                onItemUpdated(this.item);
         }
      }
   }
</Script>

<Template>
    <ListView for="item in array">
        <component :item="item" :onItemUpdated="onItemUpdated"/>
    </ListView>
</Template>

<Script>
   export default {
       onItemUpdated(item) {
          this.array[item.index] = item;
       }
   }
</Script>

你也可以去掉这个开关，在listview上添加一个itemTap，然后在list中设置数据：

<ListView for="item in array" @itemTap="itemTapped">

itemTapped(evt) {
    this.array[evt.index].VARIABLE = true/false;
}

【讨论】：

我尝试了您的解决方案，但它不起作用，尤其是当我尝试使用“checkedChange”事件更新状态时。因为当我滚动列表时，许多 Switch 元素会触发“checkedChange”事件，并且应用程序会尝试通过对支持的 apiCalls 进行更新来更新列表元素状态。于是，一切都乱了套。我不明白他们为什么会触发“checkedChange”事件。因为在我看来，他们应该只在用户点击它时触发该事件。否则完全没用。所以，我放弃了使用“checkedChange”并使用了“tap”事件。现在一切正常。
@kempo 哦，我明白了，我认为这是因为布尔值是由 ListView 设置的，因此每当列表中可见新项目时它应该触发 checkChange（被重用，因此重置所有变量） .
@kempo 我编辑了答案以解释 checkedChange 问题。既然它对您有用，您能否检查我的答案对于可能与您有相同问题的未来用户是否正确？
其实暂时不方便尝试，因为需要用到switch组件，这部分我已经完成了。如果您给我一个带有开关组件的解决方案，我很乐意尝试。
@kempo 再次编辑答案请检查这是否适合您。