Vue child component, how to query the details according to the id, passed by the parent component and display it in the child component?

if I go to the background to query the details according to the id in the created method of the component, it can be displayed normally without reporting an error, but when the id value of the parent component is changed, it will not be

again.

Vuex javascript vue-router vue.js

Feb.28,2021

take a closer look at the problem--

id after the change, the request should have been initiated, but because the asynchronous request has not yet returned a result, it caused an error:

Error in render: "TypeError: Cannot read property 'content' of undefined"

the suggested solution is:

(1) change to {{detail & & detail.content}}
or
(2) computed attribute in DOM to add a default value, that is,

gameDetail: {
    get() {
      let gameDetail = { content: '' }
      const gameId = this.id
      querySingleGameDetail(gameId).then(response => {
        return response.data.data.singleGameDetail
      })
      return gameDetail
    }
  }

subcomponents can be written as follows:

props:['id'],
data(){
     return {
       detail: {} ,  
   }  
},
methods: {
    get(id) {
        ...
    }
},
watch: {
    id: 'get'
}

my final solution is to define another variable in data, and then the get of detail returns this scalar, and the value after axios assigns the variable

Previous: Why dereferencing enum causes move?

Next: How to set the value of a dictionary to a known dictionary