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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

2070閲覧

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

trigger

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2021/04/25 15:50

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

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

該当のコード

template

vue

1<template> 2 <div id="my-list"> 3 <ul> 4 <li v-for="item in items" v-bind:key="item.id"> 5 <a :href="action + item.id.toFixed()"><button> 6 <figure> 7 <img v-if="item.file_path == ''" v-bind:src="images/no-image.jpg" alt="no image"> 8 <img v-else :src="'storage/image/' + item.file_path"> 9 </figure> 10 <figcaption> 11 <p class="shoe-name">{{ item.title }}</p> 12 <p class="last-maintenance">{{ item.created_at | moment }}</p> 13 </figcaption> 14 </button></a> 15 </li> 16 </ul> 17 </div> 18</template> 19<script> 20import moment from 'moment'; 21export default { 22 data() { 23 return { 24 action: "/posts/show/", 25 reverseItems: this.items, 26 sortOrder: 1, 27 } 28 }, 29 props: { 30 items: Array, 31 }, 32 computed: { 33 // 配列の要素順番を逆順にする 34 reverseItems() { 35 return this.items.splice().reverse(); 36 } 37 }, 38 filters: { 39 moment: function (date) { 40 return moment(date).format('YYYY/MM/DD'); 41 }, 42 } 43} 44</script>

blade

index

1@extends('layouts.app') 2 3@section('content') 4 <list-rendering-component v-bind:items="{{ $items }}"></list-rendering-component> 5@endsection

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

Controller

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

発生しているエラー

[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への理解が浅いので、お力添えをいただきたいです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2021/04/26 00:16

編集2021/04/26 00:19
FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

trigger

2021/04/26 04: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 が参考になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問