解析对象数组在NativescriptVue 中不是反应性的

问题描述

我似乎破坏了对象的反应性，并且 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)
  }
}

解析对象

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

解决方法

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