Writable Computed Properties

Snippet

Writable Computed Properties

By default, computed properties are getter-only. However, you can provide an object with both 'get' and 'set' to create a writable computed property, which is useful for two-way data binding with logic.

snippet.js
javascript
import { ref, computed } from 'vue';
 
const firstName = ref('Jane');
const lastName = ref('Doe');
 
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ');
  }
});

vue

Breakdown

get() { ... }

Defines how the value is calculated from other reactive sources.

set(newValue) { ... }

Allows updating the underlying state when the computed property is assigned a new value.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Writable Computed Properties

Related