我大致有以下幾點：
<template>
<header>
<h1>Toolbox</h1>
</header>
<main>
<Info :file_data="file_data" v-if="file_loaded"/>
<DropArea @file-dropped="onDrop"/>
</main>
</template>
<script>
import DropArea from './components/DropArea.vue'
import Info from './components/Info.vue'
export default {
name: 'Toolbox',
components: {
DropArea,
Info,
},
data() {
return {
file_loaded: false,
reader: new FileReader(),
file_data: new Uint8Array(),
}
},
methods: {
onDrop(file) {
this.reader.onloadend =this.onFileLoaded;
this.reader.readAsArrayBuffer(file);
},
onFileLoaded(file_data) {
this.file_loaded = true
this.file_data = new Uint8Array(this.reader.result); //this should update the property on the Info Component
}
}
}
</script>
Info 組件使用一個屬性并像這樣監視它：
<script>
export default {
name: 'Info',
props: ['file_data'],
watch: {
file_data: 'onFileDataChanged'
},
methods: {
onFileDataChanged() {
console.log('file_data changed')
}
},
}
</script>
不幸的是，這不適用于第一個洗掉的檔案。只有從第二個檔案開始，它才能作業。有人可以告訴我我做錯了什么嗎？
謝謝托拜厄斯
uj5u.com熱心網友回復：
默認情況下，觀察者只觀察值的更新。要讓它也呼叫初始值，請immediate: true使用物件語法進行設定。
檔案
<script>
export default {
name: 'Info',
props: ['file_data'],
watch: {
file_data: {
handler: 'onFileDataChanged',
immediate: true
}
},
methods: {
onFileDataChanged() {
console.log('file_data changed')
}
},
}
</script>
uj5u.com熱心網友回復：
也許深度道具是您需要解決的問題：
watch: { file_data: { handler: 'onFileDataChanged', deep: true } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461766.html
標籤：Vue.js