解析对象数组在 (Nativescript) Vue 中不是反应式的

Posted 2023-02-23

【中文标题】解析对象数组在 (Nativescript) Vue 中不是反应式的

【英文标题】：Array of parse objects is not reactive in (Nativescript) Vue

【发布时间】：2021-08-18 14:24:26

【问题描述】：

我似乎破坏了我的对象的反应性，并且 v-if 不起作用。我的数组是Parse Objects 的数组，它要求我使用.get() 来获取值，该值正在对标题、描述等进行初始加载。加载数据后，我检查所有内容并更新一些值.set()，但他们不会更新视图，直到我硬刷新整个 Nativescript 视图，这当然不是一个合适的解决方案。

本机脚本

<ListView for="(item, index) in challenges" @itemTap="onItemTap(item)">
  <v-template>
   ....
    <GridLayout rows="auto" columns="*" >
     <Button v-if="item.get('joined')" text="0%" row="0" horizontalAlignment="right" class="challenge-button" @tap="onButtonTap()" />
     <Button v-else text="Meedoen" row="0" horizontalAlignment="right" class="challenge-button" @tap="joinChallengeButton(item, index)" />
    </GridLayout>
  ....
  </v-template>

Vue

@Component
export default class Challenges extends Vue 
  challenges: Parse.Object[] = []

  async joinChallengeButton(item, index) 
    item.set("joined", true)
  

解析对象

"title": "title x",
"description": "description x",
"createdAt": "2021-05-29T11:32:25.991Z",
"updatedAt": "2021-05-29T12:32:33.133Z",
"startDate": 
"__type": "Date",
"iso": "2021-05-19T11:32:00.000Z"
,
"endDate": 
"__type": "Date",
"iso": "2021-06-19T11:32:00.000Z"
,
"image": 
"__type": "File",
"name": "d8684be38017585079cfdb4380b4d9d4_sleep.jpeg",
"url": "xxxxx.com"
,
"joined": true,
"objectId": "AUJ4Y7XNcp"

更新 1： 如果我以 Vue 方式更新数组，它会破坏 nativescript 视图并刷新并仅显示该项目，而不是完整列表。

    this.$set(this.challenges, index, item)

【参考方案1】：

如果找到答案。该对象正在使用 vue 方法 this.$set(this.challenges, index, item) 进行更新，但之后列表视图未显示正确的高度。所以所有的新对象都是隐藏的行。