Wednesday 30 October 2019

v-model vs sync && getter and setter for computed

<comp :value.sync="bar"></comp>
expands to:
<comp :value="bar" @update:value="val => bar = val"></comp>
<comp v-model="bar"></comp>
expands to:
<comp :value="bar" @input="val => bar = val"></comp>https://forum.vuejs.org/t/sync-vs-v-model/19380https://alligator.io/vuejs/v-model-two-way-binding/https://stackoverflow.com/questions/45327249/vue-js-sync-input-field
Sync modifier was reintroduced in 2.3.0+, see Vue Js Docs.
In 2.3.0+ we re-introduced the .sync modifier for props, but this time it is just syntax sugar that automatically expands into an additional v-on listener:
The following <comp :foo.sync="bar"></comp> is expanded into:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
For the child component to update foo‘s value, it needs to explicitly emit an event instead of mutating the prop:
this.$emit('update:foo', newValue)



https://codingexplained.com/coding/front-end/vue-js/adding-getters-setters-computed-properties
computed: {
 fullName: {
  get: function() {
      
  },
  set: function(newValue) {

  }
 }
}
The logic to retrieve the property’s value is going to remain the same, so I can simply copy in the code from the old function.
get: function() {
 alert("Assembling full name...");
 return this.firstName + ' ' + this.lastName;
}

No comments:

Post a Comment