Vue selects a piece of data from the list, how to display the value of the data every time you click on the modify pop-up box, instead of the value that has not been saved since the last edit

the parent component passes the object selected in the list to the pop-up component;

Code in pop-up component:

Mar.30,2021

my idea is that the value of the two-way binding of your child component should not be directly passed to him by the parent component. When the pop-up window opens, do an action, that is, declare a new value, and then pass the value of the parent component to him ( needs to deeply copy ), and then your child component will bind the newly declared value directly. Then when the pop-up window closes, if it is saved and closed, then pass the newly declared value to the parent component, and let the parent component update this value, which is the custom event of vue. If the $emit and $on; are not saved and closed, then you don't have to do anything else for a long time, just close the child component directly.


when you click on the pop-up window, just give the value of the parent component to the pop-up window. The value of the parent component is always the value of the server, and it will not change


if it is not submitted to the server. After clicking on

, copy a copy of the data, save it and submit it back, otherwise it will be discarded.


input(v-model="localValue.someField")
</template>

<script>
export default {
  props: {
    value: null,
  },

  data() {
    return {
      localValue: null,
    };  
  },

  methods: {
    onSubmit() {
      this.value = this.localValue;
    },
  },

  beforeMount() {
    this.localValue = cloneDeep(this.value);
  },
}
</script>
Menu