How can I change the value of a computed property?

user_9911560 0
Viewed 4626

Is there a way to change the initial data of a computed property? When I tried to change the data with an input tag, the vue gave me a warning like Write operation failed: computed property "searchField" is readonly. In case you wonder why I make this simple case with a computed rather than the data property, it is just for simplicity in the forum. There is a reason why I make it with the computed one. Here is the code.

<template>
  <input type="text" v-model="searchField" />
</template>

<script>
  export default {
    computed: {
      searchField() {
        return "";
     }
    }
  };
</script>
computed-properties vue.js javascript
1 Answers

computed properties are interesting when you apply some logic around data. In your example you should first declare a data property, and then you can apply logic with getter / setter :

<template>
  <input type="text" v-model="searchField" />
</template>

<script>
  export default {
    data: () => ({
      _searchField: ''
    }),
    computed: {
      searchField: {
        get() {
          return this._searchField
        },
        set(value) {
          this._searchField = value
        }
     }
    }
  };
</script>
user_52393740
Related