Nuxt.js×Rails apiでポートフォリオを作成中です。
user avatar画像を作成中にerrorが発生。
質問テンプレート
エラーメッセージは解決したのですが、コピペをしただけで理解ができていないのでしっかり理解したい
エラー解決前と解決後のコードを載せます
computedの記述がほとんどわからないです
value
Invalid prop: custom validator check failed for prop "value".
- ソースコード
<v-file-input
v-model="editImage"
accept="image/png, image/jpeg, image/bmp"
prepend-icon="mdi-image"
label="画像を選択してください"
class="pt-14"
@change="setImage"
/>
<script>
export default {
data(){
return {
editImage: "",
input_image: null,
defaultImg: require("@/assets/images/default_user_icon.jpeg")
}
},
methods: {
setImage(file) {
this.editImage = file
if (file !== undefined && file !== null) {
if (file.name.lastIndexOf(".") <= 0) {
return
}
const fr = new FileReader()
fr.readAsDataURL(file)
fr.addEventListener("load", () => {
this.input_image = fr.result
})
} else {
this.input_image = null
}
},
- 試したこと
<v-file-input
v-model="inputValue"
accept="image/png, image/jpeg, image/bmp"
prepend-icon="mdi-image"
label="画像を選択してください"
class="pt-14"
@change="setImage"
/>
<script>
export default {
props: {
value: {
type: null
},
},
data(){
return {
input_image: null,
defaultImg: require("@/assets/images/default_user_icon.jpeg")
}
},
computed: {
inputValue: {
get() {
return this.value
},
set(value) {
this.$emit("input", value)
}
}
},
methods: {
setImage(file) {
if (file !== undefined && file !== null) {
if (file.name.lastIndexOf(".") <= 0) {
return
}
const fr = new FileReader()
fr.readAsDataURL(file)
fr.addEventListener("load", () => {
this.input_image = fr.result
})
} else {
this.input_image = null
}
},
Q&A
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。