Home > OS >  how to reset the object prop when restart the vue component?
how to reset the object prop when restart the vue component?

Time:09-26

it's a simple example : enter image description here

component "nameinput" has two default props.

  1. changes props value
  2. close the component
  3. 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' }
   }
}
  • Related