解析数组 objects 在 (Nativescript) Vue 中不是反应性的

Question

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

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)
  }
}

解析Object

{
"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)

Answer 1

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

解析数组 objects 在 (Nativescript) Vue 中不是反应性的

Array of parse objects is not reactive in (Nativescript) Vue

parse-platform

typescript

vue.js

nativescript

vue-class-components