The vue child parent component passes a value. You want to render the child component after axios returns, but you must do so. How to solve this problem?

vue wants to pass values to child components through prop. The value bound by the parent component has a default value. It is hoped that after the data is returned by the axios background, extend more objects on its own data and then pass it to the child component. How to solve this problem?

<template>
  <a-component  :opt="opt" ></a-component>
</template>
<script>
  export default{
    data(){
      return {
        opt:{
          a:1,
          b:2
        }
      }
    },
    methods:{
        getList(){
            axios.get("").then(function (res) {
          _.extend(_this.opt,{
              c:3,d:4
          })
        })
        //debuggercreatedoptopt
        }
    }
  }
</script>
Mar.05,2021

if you want the child component to render when there is any data in the parent component, you can add a judgment condition to the parent component, such as < / a-component > . But even if the sub-component is rendered first, when the axios request ends, that is, when the opt data changes, it will be automatically passed to the sub-component, thus changing the state of the sub-component. So it doesn't feel necessary to have to wait until the data extend before rendering the subcomponents.

Menu