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

Posted 2023-04-14

【中文标题】在 NativeScript-Vue ListView 中管理组件状态

【英文标题】：Managing component state in NativeScript-Vue ListView

【发布时间】：2019-12-24 10:48:54

【问题描述】：

我时遇到问题。我在以下文章中遇到了完全相同的问题：https://www.nativescript.org/blog/managing-component-state-in-nativescript-listview。文章不解释 Nativescript-Vue 的解决方案。我在我的 ListView 中使用 Switch 组件来保持列表项的状态，无论它们是否被选中，但没办法。有没有人遇到同样的问题并应用了 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 再次编辑答案请检查这是否适合您。