[Vuejs]-Getting Unexpected mutation of "buttonText" prop

by

0👍

Is it a bad practice to mutate a prop see link, you can mutate an inner component variable inside data or use v-model to have two-way dataflow on your props using v-model.

in this case, you can:

  1. set up your internal data variable with the value of your prop, and then mutate that data variable ( not the prop )
  2. Create and set the prop as a model value and expose it with a emit.

I will show you the easier path to get out of the error, but you need to reconsider your component responsibilities.

Vue.component('mybutton', {
  template: `
 <div class="main-container">
    <h1>Button Disable if nothing is enter in email field</h1>
    <div class="wrapper">
      <input type="email" placeholder="email" v-model="email" />
      <button :disabled="email.length < 1" class="btn-sub" @click="handleClick">
        Subcribe
      </button>
      <!-- <button :disabled="!email.length">Subscribe</button> -->
      <h2>{{ email }}</h2>
      <h1>{{ inputMessage }}</h1>
    </div>
  </div>
  `,
  props: {
    buttonText: {
      type: String,
      default: "clickMe",
      required: false,
    }
  },

  data() {
    return {
      email: "",
      inputMessage: this.buttonText
    };
  },

  methods: {
    handleClick() {
      this.inputMessage = "I have been clicked!!!";
    },
  },
});


new Vue({
  el: '#app',
  data(){
     return {
        message: "Changed Text"
     }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
   <div>
      <mybutton button-text="Change Text" />
   </div>
</div>

Leave a comment