質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

Vueでv-forを使った並び替えが上手くいきません。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 542

score 4

現在、Laravel, Vue.jsを用いたアプリを開発しています。

初めてVueを使用しており、こちらのサイトを参考に、v-forを使って並び替えを行う実装をしているのですが、1歩目から複数のエラーが発生しており、詰まっています。
わかる方がいらっしゃいましたら、ご教授いただきたいです。

該当のコード

template

<template>
  <div id="my-list">
      <ul>
        <li v-for="item in items" v-bind:key="item.id">
          <a :href="action + item.id.toFixed()"><button>
            <figure>
                <img v-if="item.file_path == ''" v-bind:src="images/no-image.jpg" alt="no image">
                <img v-else :src="'storage/image/' + item.file_path">
            </figure>
            <figcaption>
              <p class="shoe-name">{{ item.title }}</p>
              <p class="last-maintenance">{{ item.created_at | moment }}</p>
            </figcaption>
          </button></a>
        </li>
      </ul>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
      action: "/posts/show/",
      reverseItems: this.items,
      sortOrder: 1,
    }
  },
  props:  {
    items: Array,
  },
  computed: {
  // 配列の要素順番を逆順にする
    reverseItems() {
      return this.items.splice().reverse(); 
    }
  },
  filters: {
    moment: function (date) {
      return moment(date).format('YYYY/MM/DD');
    },
  }
}
</script>

blade

@extends('layouts.app')

@section('content')
    <list-rendering-component v-bind:items="{{ $items }}"></list-rendering-component>
@endsection

bladeに渡す$itemsの中身を渡すコントローラー

    public function index()
    {
        $userId = Auth::id();
        $items = Post::where('user_id',$userId)->get();
        return view("posts.index",compact('items'));
    }

発生しているエラー

[Vue warn]: The computed property "reverseItems" is already defined in data.

found in

---> <ListRenderingComponent> at resources/js/components/ListRenderingComponent.vue
       <Root>
warn    @    app.js:60124
initComputed    @    app.js:64288
initState    @    app.js:64144
.
.
.

[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ListRenderingComponent> at resources/js/components/ListRenderingComponent.vue
       <Root>
.
.
.

Error in render: "TypeError: Cannot read property 'id' of undefined"

found in

---> <ListRenderingComponent> at resources/js/components/ListRenderingComponent.vue
       <Root>
.
.
.
TypeError: Cannot read property 'id' of undefined
.
.
.
Uncaught (in promise) TypeError: Cannot set property '__VUE_DEVTOOLS_UID__' of null
    at registerAppJob (backend.js:1437)
.
.
.

App with id 0 not found
.
.
.
Uncaught (in promise) TypeError: Cannot set property 'lastInspectedComponentId' of null
at ~
at ~
at ~
.
.
.
Uncaught (in promise) TypeError: Cannot read property 'id' of null
at ~
at ~
at ~

試したこと

エラー文から、itemやidが定義されていないっぽいことはわかるのですが、対策法の検討が付きません。
テンプレート内で、itemとidを使っているのは、v-bind:keyですが、v-forでitem in itemsとして取り出されて定義されているのではないのでしょうか?

まだvueへの理解が浅いので、お力添えをいただきたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

算出プロパティの定義関数名にも定義変数名にも同じreverseItemsを使っています。Vueのルールではそれは推奨されませんので、算出プロパティで名前を残すなら、変数名は別名に変えてください。

already ●●●● defined は、すでに定義済ですという警告です。

そして、それが原因で、オブジェクト名と算出プロパティ名が混同されてしまい、オブジェクト内のメンバを呼び出せなくなっています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/26 13:28

    ありがとうございます。
    ご回答を参考にその後触ってみたところ、item in itemsをitem in reverseItemsとすることで解決しました。ここのitemsはpropsで引き継いだオブジェクトかと勘違いしていました。

    Cannot set property '__VUE_DEVTOOLS_UID__' of nullのエラーはいつの間にか解決してしまっていたのですが、https://github.com/vuejs/vue-devtools/issues/1289 が参考になりました。

    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る