配列を更新するとき、
app.gachaResult = response.data
では表示が更新されなくて、
app.gachaResult.splice(0, app.gachaResult.length, ...response.data)
配列のメソッドで更新しないとリアクティブに更新されない。
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios"></script>
<style>
#title {
background-color:#1ce;
}
</style>
</head>
<body>
<div id="app">
<div id="title"><a href="/game.php">GAME</a></div>
<user-info v-bind:user="user"></user-info>
<p>
<button class="btn btn-primary" v-on:click="viewGacha">gacha</button>
<button class="btn btn-primary" v-on:click="viewChara">chara</button>
<button class="btn btn-primary" v-on:click="viewItem">item</button>
</p>
<router-view></router-view>
<hr>
<div><button class="btn btn-danger" v-on:click="reset">reset</button></div>
</div>
<script>
const UserInfo = {
props: ['user'],
template: `<div>{{user.id}}:{{user.name}} Lv.{{user.level}}</div>`
}
Vue.component('user-info', UserInfo)
const Gacha = {
props: ['gachaResult'],
template: `
<div>
<p>ガチャ</p>
<button class="btn btn-primary" v-on:click="executeGacha(1)">1回</button>
<button class="btn btn-primary" v-on:click="executeGacha(3)">3回</button>
<div v-for="result in gachaResult">
{{result.name}} Lv.{{result.level}}
</div>
</div>
`,
methods: {
executeGacha(count) {
axios.get('/api/execute_gacha.php?count='+count).then(response => {
app.gachaResult.splice(0, app.gachaResult.length, ...response.data)
app.charas.push(...response.data)
})
}
}
}
const Chara = {
props: ['charas'],
template: `
<div>
<p>キャラ</p>
<div v-for="chara in charas">
{{chara.name}} Lv.{{chara.level}}
<router-link :to="{name: 'chara-detail', params: {name: chara.name}}" class="btn btn-primary">detail</router-link>
</div>
</div>
`
}
const CharaDetail = {
props: ['name'],
template: `
<div>
<p>キャラ詳細:{{name}}</p>
<router-link :to="{name: 'chara-profile', params: {name: name}}" class="btn btn-primary">profile</router-link>
<router-link :to="{name: 'chara-status', params: {name: name}}" class="btn btn-primary">status</router-link>
<router-view></router-view>
</div>
`
}
const CharaProfile = {template: '<p>Profile</p>'};
const CharaStatus = {template: '<p>Status</p>'};
const Item = {
template: `
<div>
<p>アイテム</p>
<button class="btn btn-primary" v-on:click="levelUp">レベルの実</button>
</div>
`,
methods: {
levelUp() {
axios.get('/api/use_item.php').then(response => (app.user = response.data))
//app.user.level++
}
}
}
const NotFound = { template: '<div>404</div>' }
const router = new VueRouter({
routes: [
{ path: '/gacha', name: '/gacha', component: Gacha, props: true },
{ path: '/chara', name: '/chara', component: Chara, props: true, },
{ path: '/chara/:name',
name: 'chara-detail',
component: CharaDetail,
props: true,
children: [
{
path: 'profile',
name: 'chara-profile',
component: CharaProfile
},
{
path: 'status',
name: 'chara-status',
component: CharaStatus
},
]
},
{ path: '/item', component: Item },
//{ path: '/*', component: NotFound }
]
})
const data = {
user: {id: 0, name: '', level: 1},
charas: ,
gachaResult:
}
const app = new Vue({
router,
data,
mounted () {
axios.get('/api/get_user.php').then(response => (app.user = response.data)),
axios.get('/api/get_charas.php').then(response => (app.charas = response.data))
},
methods: {
viewGacha() {router.push({name: '/gacha', params: {gachaResult: app.gachaResult}})},
viewChara() {router.push({name: '/chara', params: {charas: app.charas}})},
viewItem() {router.push('/item')},
reset() {
axios.get('/api/reset.php').then(response => {
app.user = response.data.user
app.charas.splice(0, app.charas.length, ...response.data.charas)
})
}
}
}).$mount('#app')
</script>
</body>
</html>
