Calculating data using computed in vue does not take effect.

relies on props"s data data in the calculation attribute. When data is updated, computed does not fetch data data in real time. (originally intended to change through watch data, but watch has not been executed, but the data data itself has changed, which is very strange.) the
code is as follows: 

    props: {
        data: {
            default: () => {},
            type: Object,
        },
    },
    data() {
        return {
        };
    },
    created() {
    },
    computed: {
        ...mapState({
        }),
        handleTotalPrice() {
            return this.fixNumber(this.totalPrice);
        },
        handledData() {
            const handledData = JSON.parse(JSON.stringify(this.data)); // 
            Object.entries(handledData).forEach(([key, value]) => {
                if (value.price) {
                    handledData[key].price = this.fixNumber(value.price);
                }
                if (value.list) {
                    ...
                }
            });
            return handledData;
        },
    },
watch: {
    // 
    data(newV, oldV) {
        console.log("submit watch");
    },
    data: {
        handler(newV, oldV) {
            console.log("submit watch");
        },
        deep: true,
        
    },
},
< hr >

has located the problem. Setting the value of obj in the parent component requires methods such as set or splice, otherwise the child component cannot listen.
thought that only the domestic demand of this component had to pass set, but I never thought.

Javascript vue.js
Apr.29,2022

there is one thing to note when using listening. When a component is first loaded, it passes in props, which is not triggered in my impression.

both have been tested, and both are triggered 

<template>
    <div>
        <div>{{total}}</div>
        <div>{{totalTest}}</div>
    </div>
</template>
<script>
export default {
  props: {
    data: String
  },
  components: {},
  data () {
    return {
    }
  },
  computed: {
    total () {
      return this.data + ''
    },
    totalTest () {
      const handledData = JSON.parse(JSON.stringify(this.data)) // 
      return handledData + ''
    }
  },
  watch: {
    data (newV, oldV) {
      console.log(11111)
    }
  },
  created () {
  },
  methods: {}
}
</script>

clipboard.png

clipboard.png

object, also triggered 

<template>
  <div>
    <div>{{total.number}}</div>
    <div></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object
    }
  },
  components: {},
  data () {
    return {

    }
  },
  computed: {
    total () {
      const handledData = JSON.parse(JSON.stringify(this.data)) // 
      handledData.number = handledData.number + 'hhhhh'
      return handledData
    }
  },
  created () {
  },
  methods: {}
}
</script>

Previous: Angular returns data-bound local variables

Next: Electron-builder if you edit the registry through the nsis extension

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu