CODEWITHSUNDEEP
javascriptvue.jsmodal-dialognuxt.jsiview-ui
user7461761
user7461761

Reputation:

Vuejs Modal. Avoid changing props, nuxt.js iview

I need help with modals, i tried to get this question sorted yesterday but then it got even worse. So please any help would be appreciated. I have a parent component and inside of there i have a modal (child component)

In my parent the code:

    <template>
<div class="all">
  <Button type="primary" @click="modalUp()">Press me</Button>
  <appTest @changed = "modal1 = $event" :modal1='modal1'> </appTest>
  {{modal1}}

</div>
</template>
<script>
/* eslint-disable */
import test from '~components/test.vue'


export default {

  data(){
    return{
     modal1: false
    }
  },
  components: {
    appTest: test
  },
  methods: {
    modalUp() {
      this.modal1 = true
    }
  },
  watch:{
    modal1: function(){
      this.$on('changed', (data)=>{

        console.log(data)
      })

    }
  }

}

</script>
<style lang="css" scoped>


</style>

inside of the child component (appTest) i have this

 <template>
 <div id="" >
   <Modal v-model="modal1" title="MODALLLL" @on-ok="ok" @on-cancel="cancel">
     <p>@twitter</p>
     <p>@facebook</p>
     <p>Good</p>
     {{modal1}}
   </Modal>
 </div>
 </template>
 <script>
 /* eslint-disable */
 export default {
   props: ['modal1'],
   data() {
     return {
     }
   },
   methods: {
     ok() {
       this.$Message.info('all good');

     },
     cancel() {
       this.$Message.info('Cancel');
       this.$emit('changed')
     }
   },
   watch:{
     modal1: function(){
       this.$emit('changed', this.modal1)
     }
   }

 }
 </script>
 <style lang="css" scoped>
 </style>

So this code works in one way, the modal shows up correctly but once its gone and when we get back to parent component it gives me this vue warning AVOID MUTATING PROP

I checked the docs and everything but vuejs docs give examples like 2+2 which is not helpful in this case. I watched videos on the internet etc but still don't know how to get it done in a proper way.

What would be the best way to get it working?

I'm using modal from iview

Upvotes: 2

Views: 1892

Answers (1)

Bert
Bert

Reputation: 82489

Change your child to use a computed value.

export default {
  props: ['modal1'],
  computed:{
    showModal:{
      get(){return this.modal1},
      set(v){ this.$emit("changed", v)}
    }
  },
}

And update the child template to

<Modal v-model="showModal" ...></Modal>

Doing this, whever you change modal1 in the parent, the value will be updated in the Modal component, and whenever the Modal component changes the value, it will be sent to the parent.

Upvotes: 1

Related Questions