how to reset the object prop when restart the vue component?-CodePudding

it's a simple example :

component "nameinput" has two default props.

changes props value
close the component
open the component

prop namey come to default value. But prop subject.name keep the changed value.

How to let subject.name change to default value ?

CodePudding user response：

Try like following snippet:

Vue.component('nameinput', {
  props: {
    subject:{
      type: Object,
      default() {
        return {name: 'homor' }
      }
    },
    namey: {
      type: String,
      default: 'homor'
    }
  },
  data: function (){
    return {
      sub: this.subject.name,
      nam: this.namey
    }
  },
  template: '<div>subject.name<input v-model="sub" type="input" /><br/>namey<input v-model="nam" type="input" /></div>'
});

new Vue({ 
  el: '#components-demo',
  data: {
    statusInput: true
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="components-demo">
  <nameinput ref="nameinput" v-if="statusInput"></nameinput>
  
  <button @click="statusInput=true">打开</button>
  <button @click="statusInput=false">关闭</button>
</div>

CodePudding user response：

Here says:

// Object with a default value
propE: {
   type: Object,
   // Object or array defaults must be returned from
   // a factory function
   default() {
      return { message: 'hello' }
   }
},

In your case, default value will be set if you do this:

subject:{
   type: Object,
   default() {
      return { name: 'homor' }
   }
}