Vue.js 组件在父更改 boud 数据字段后未更新

Question

我大致有以下几点：

<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>

信息组件使用属性并像这样观察它：

<script>
export default {
name: 'Info',
props: ['file_data'],
watch: {
    file_data: 'onFileDataChanged'
},
methods: {
    onFileDataChanged() {
        console.log('file_data changed')
    }
},
}
</script>

不幸的是，这不适用于第一个放置的文件。只有从第二个文件开始，它才有效。有人可以告诉我我做错了什么吗？

谢谢托拜厄斯

Answer 1

默认情况下，观察者只观察值的更新。要让它也调用初始值，请使用对象语法设置 immediate: true。

Docs

<script>
export default {
  name: 'Info',
  props: ['file_data'],
  watch: {
    file_data: {
      handler: 'onFileDataChanged',
      immediate: true
    }
  },
  methods: {
   onFileDataChanged() {
      console.log('file_data changed')
    }
  },
}
</script>

Answer 2

也许 depth 道具是您需要解决的问题：

watch: { file_data: { handler: 'onFileDataChanged', deep: true } }

Vue.js 组件在父更改 boud 数据字段后未更新

Vue.js component isn't updated after parent changes boud data field

vue.js