Home > Net >  How to make a sample that shows the 'Props are overwritten when re-rendering' anti pattern
How to make a sample that shows the 'Props are overwritten when re-rendering' anti pattern

Time:12-05

I would like to be convinced that 'Props are overwritten when re-rendering' is an anti pattern.

const MyButton = Vue.extend({
  props: {
    obj: {}
  },
  template:
    "<button @click=\"obj.text = 'Value' Math.round(Math.random()*100)\">Change text in child ({{obj.text}})</button>"
});

const app = new Vue({
  el: "#main",
  data: {
    obj: { text: "Value2" }
  },
  components: {
    MyButton
  },
  template: `
<div>
  <Button @click='obj.text = "Value" Math.round(Math.random()*100)'>Change text in parent ({{obj.text}})</Button><br>
  <MyButton :obj='obj'/>            
  • Related