Vue.jsのDataオプションに指定したプロパティを更新できない
Q&A
Closed
解決したいこと
APIから取得したデータを画面表示できない。
Vue.jsとJavaを使って、urlにアクセスした際にDBに格納されている名前の一覧を返す
小さな練習用アプリケーションを作成しています。
Vue.jsのMountedオプションを使ってAPIを呼び出し、データを取得して、
画面に表示する流れなのですが、データ取得後、dataオプション内に指定した
データ格納用のプロパティの値が更新されず、一覧表示されない事象が発生しています。
値の詰め方やライフサイクルフックの問題かと予想していますが、答えが掴めずにおります。
ご助力頂けますと幸いです。
発生している問題・エラー
APIの実行は行われて、、レスポンスは返って来ているが、dataプロパティへの格納が出来ていない様子
環境
API
- Java17
- Spring boot 3.1.4
- h2Database
- tomcat10.1.13
フロントエンド
- Vue3
- axios
本事象に関連すると思われるソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<div id="app">
<ul>
<li v-for="member in items.memberList">
{{ member.name }}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3.1.5"></script>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
Vue.js
const app = Vue.createApp({
data: () => ({
items:''
}),
watch: {},
mounted: function () {
console.log('hello');
this.getMemberList();
console.log(this.items)
},
methods: {
getMemberList: function () {
axios
.get('http://localhost:8080/sample/index')
.then(function (response) {
console.log('response');
console.log(response)
this.items = response.data;
})
.catch(function (error) {
console.log('error' + error);
})
.finally(function () {
console.log('API finished');
});
},
},
});
app.mount('#app');
//エンティティクラス
package com.example.demo.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
@Entity
@Table(name = "member01")
@AllArgsConstructor
@NoArgsConstructor
@Getter
public class Member {
@Id
private int id;
private String name;
}
//レスポンスクラス
package com.example.demo.response;
import java.util.List;
import com.example.demo.entity.Member;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@JsonIgnoreProperties({"hibernateLazyInitializer"})
@Getter
public class JavaAndVueResponse {
List<Member> memberList;
}
上記以外に必要な情報ありましたら、お声掛けいただけますと幸いです。
宜しくお願い致します。
0
