vue.js データを登録した後に画面を描画したい

Question

Listが表示されるページがあります。
追加するボタンを押した時にデータに登録されるのですが登録された後にItemListに最新のデータを表示したいです。
今、現在のコードは追加をするボタンを押した後にデータに登録することができるのですが画面を自分でリロードしないと追加したものがListに表示されません。

データ追加した後にそのままLIstに表示されるようにするにはどうしたらいいでしょうか？

  //ItemList.vue
    <pull-to-refresh v-on:onRefresh="refreshItems">
      <list v-on:refreshItems="refreshItems" />
    </pull-to-refresh>
    <post-item-success-modal
      v-if="isShowModalPostItemSuccess()"
      @click-close="PostSuccessModal()"
      :code="getPostedItemCode()"
    />

  refreshItems() {
    PostStore.refreshItems(this.$axios)
  }

  addItems(items: Item[]) {
    items.forEach( item => {
      this.itemsEntities = [...this.itemsEntities, new ItemEntity(item)]
  })

  onComplete() {
    this.hasMorePage = false
  }

    async refreshItems(axios: NuxtAxiosInstance) {
    const res = await ItemDataSource.getItems(axios, this.title, this.count, this.text)
    this.addItems(res.items)
    if (res.items == null || res.items.length < 1) {
      this.onComplete()
    }
  }
}

//list.vue
  <button
    @click="onClickButton()"
    type="submit"
    name="button"
    class="create_form_button"
  >
    追加する
  </button>

  onClickButton() {
  const postTitle: string = this.title
  const postText: number = this.text
  this.postItem(
    postTitle,
    postText,
 )
  }
  postItem(
    title: string,
    body: string,
  ) {
    const promise = ItemDataSource.postItem(
      this.$axios,
      authStore.userId,
      title,
      body,
    )
    promise
      .then((res) => {
          this.onPostSuccess(res.ogp_url, res.code, title)
      })
      .catch((err) => {
        this.onPostFail(err)
      })
  }

    onPostSuccess(ogpUrl: string, itemCode: string, title: string) {
    const item = new Item()
    item.title = title
    item.code = itemCode
    item.ogp_url = ogpUrl
    Store.showModalPostSuccess(item)
    this.$router.push('/post')
  }

Answer 1

addItemsでpushを使用してください

配列の変化を検出

Comments

[ktaaa]

返信ありがとうございます。
addItems(items: Item[]) {
items.forEach( item => {
this.itemsEntities.push() = [...this.itemsEntities, new ItemEntity(item)]
})

ということでしょうか？

[aaharu]

すみません詳しく見たら違う気がしてきました。コードが断片的過ぎてどこをどうしたいのかいまいち理解できておりません……

[ktaaa]

えーっと。
コードが断片的というのはわかりずらいってことですか？

[aaharu]

はい。
あとpushは
this.itemsEntities.push(new ItemEntity(item))
です

[ktaaa]

やってみましたが変わらなかったです

[ktaaa]

今調べましたが、 addItems(items: Item[]) {
items.forEach( item => {
this.itemsEntities = [...this.itemsEntities, new ItemEntity(item)]
})は追加をして、自分で画面をリロードされたら呼ばれます。