試してみたところ、確かにページ表示直後はイベントが走りませんでした。
image_path
という変数を image[src=]
と input[type=text]
の両方にバインドさせ、
入力値を変えるとイベントが発火しました。
<template>
<div class="container">
<div>
<input type="text," v-model="image_path">
<img :src="image_path" @error="onError" alt="">
</div>
</div>
</template>
<script>
export default {
asyncData () {
return {
image_path : "/testx.jpg" // 存在しないイメージ
}
},
methods: {
onError (e) {
console.log(e)
console.log(e.target)
e.target.src = "https://sites.google.com/site/dekchysite95/_/rsrc/1480944463347/extra-credit/google.png"
}
}
}
</script>
表示直後ではイベントが走らないのかもしれませんね。
ちなみに以下のコードだとページ表示直後に発火します。
<template>
<div class="container">
<div>
<input type="text," v-model="image_path">
<img :src="image_path" @error="onError" alt="">
</div>
</div>
</template>
<script>
export default {
data () {
return {
image_path : ""
}
},
methods: {
onError (e) {
console.log(e)
console.log(e.target)
e.target.src = "https://sites.google.com/site/dekchysite95/_/rsrc/1480944463347/extra-credit/google.png"
}
}
}
</script>
data()
関数上は空にしておき、 creatd()
関数で値をセットする、という対処でどうでしょう?