RadListView не отвечает на новые элементы в ObservableArray

Question

Я пытаюсь отобразить список изображений, используя RadListView.Поскольку у меня было несколько странное поведение, когда данные поступали из обычного массива, я решил попробовать ObservableArray, как рекомендовано в документации. (В частности, tns-vue)

Проблема в том, что нажатие нового элементак модели, не обновляет вид.Элемент есть, но ничего не отображается.

Это мой RadListView:

 <RadListView layout="grid" ref="newImages" for="image in newImages">
              <v-template>
                <ImageComponent
                  showDate="false"
                  :onLongPress="()=>{onLongPress(image)}"
                  :image="image"
                ></ImageComponent>
              </v-template>
            </RadListView> 

Массив "newImages":

 data() {
    return {    
      newImages: new ObservableArray([]),     
    };
  }

Я добавляю элементы вмассив, используя плагин камеры:

openGallery() {
      var that = this;
      console.log(that.newImages.length);
      var context = imagepicker.create({ mode: "multiple" }); // use "multiple" for multiple selection
      context
        .authorize()
        .then(function() {
          return context.present();
        })
        .then(function(selection) {
          const images = [];
          selection.forEach(function(selected) {
            const image = that.createNewFileSchema(selected._android);
            images.push(image);
          });
           that.newImages.push(images)//This adds the images to the array, but UI doesn't respond to the change.

        })
        .catch(function(e) {
          alert(e);
        });
    },

В чем здесь может быть проблема?

Answer 1

Если вы перемещаете массивы в массивы данных, чтобы виртуальная DOM заметила эти изменения, вы, вероятно, не захотите использовать глубокий наблюдатель, вызывающий метод, возвращающий обновленный массив.

У вас будет то же самоепроблема с объектами, но тогда вы сможете использовать:

this.$set(<object>, <key>, <value>)

Я не уверен, есть ли лучший способ для массивов, но вы можете попробовать наблюдателя, как сказано

watch: {
   newImages: {
      handler: function(<value>, <oldValue>) {},
      deep: true
   }
}

ОБНОВЛЕНО - Вы можете использовать это. $ Set для массивов https://vuejs.org/v2/api/#Vue-set

/*   this.$set(<Array>, <Index>, <Value>)   */

this.$set(this.newImages, this.newImages.length, [...newArrWithImages])

Этот парень объясняет реактивное обновление массивов: Vuejs и Vue.set (), updateмассив