Property or method "show" is not defined on the instance but referenced during render.

Vue.js超初心者です。Vue.jsを勉強しています。
[Vue warn]: Property or method "show" 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. とエラーが出ました。
htmlに

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Vue.js App</title>
	<link href="main.css" rel="stylesheet">
</head>
<body>
	<div id="app">
		<button v-on:click="handleClick($event,item)">クリック</button>
		<img src="img.jpg" v-on:load="show=true" v-bind:class="{hide: !show}">
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
	<script src="main.js"></script>
</body>
</html>

と書き、cssに

img {
opacity: 1;
transition: opacity 1s;
}

img.hide{
	opacity: 0;
}

main.jsに

var app = new Vue({
	el:'#app',
	data:{
		list:[
		{id:1,name:'スライム',hp:100},
		{id:2,name:'ゴブリン',hp:200},
		{id:3,name:'ドラゴン',hp:500},]
	},
	methods:{
		doAttack:function(index){
			this.list[index].hp -=10
		}
	}
})

と書きました。クリックボタンを押すと、
画像がふわっと浮かび上がるシステムを作りたいのですが、上記のエラーが出ました。どう修正したらいいでしょうか？

len_souko

2018/10/21 06:42

エスパー検定試験ですか？なぜJavaScriptでエラーが出ているのにJavaScriptのソースを提示しないまま修正についての質問をするのでしょうか？あなたの書いたソースを見ずに透視（千里眼かあるいはほかの何かかもしれない）能力が使える人でも募集したいのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

文字通りに、「show」という変数が定義されてない状態に見えます。が。。。。

js側のソースを一緒に掲載してくれないと、詳しい返答はできませんね。
(js側のソースとはHTMLに書いてある「handleClick」が実装されてるソースの事です）

つまり、下記のようにshowやhideが定義されてない状態かなーと思います。

hello.vue
1export default {
2  data () {
3    return {
4      show: false, /* <- こういうのが必要 */
5      hide: false
6    }
7  },
8  methods: {
9    handleClick: function(event, item) {
10      // your code
11    }
12  }
13}

補足

typescript
1// 追記分
2var app = new Vue({
3    el:'#app',
4    data:{
5        list:[
6        {id:1,name:'スライム',hp:100},
7        {id:2,name:'ゴブリン',hp:200},
8        {id:3,name:'ドラゴン',hp:500},]
9    },
10    methods:{
11        doAttack:function(index){
12            this.list[index].hp -=10
13        }
14    }
15})

追記してくださったソースを見た感じ、一応あるべきものが…そろっていません。元々やりたい事が何かまでは今の段階ではわかりませんが、show, hide, handleClickという3要素が全部欠けていますのでエラーになってしまいます。

typescript
1// こうなるべき
2var app = new Vue({
3    el:'#app',
4    data:{
5        list:[
6        {id:1,name:'スライム',hp:100},
7        {id:2,name:'ゴブリン',hp:200},
8        {id:3,name:'ドラゴン',hp:500},],
9        show: false,　// これ
10        hide: false　// これ
11    },
12    methods:{
13        doAttack:function(index){
14            this.list[index].hp -=10
15        },
16        handleClick: function(event, item) {　// これ
17          // クリックしてからやりたい事
18        }
19    }
20})