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

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

<script>
  export default {
    puted: {
      searchField() {
        return "";
     }
    }
  };
</script>

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

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

<script>
  export default {
    puted: {
      searchField() {
        return "";
     }
    }
  };
</script>

• javascript
• vue.js
• puted-properties

• 1 Use the puter setter: vuejs/v2/guide/puted.html#Computed-Setter – dRoyson Commented Sep 2, 2021 at 3:13

1 Answer 1

puted 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: ''
    }),
    puted: {
      searchField: {
        get() {
          return this._searchField
        },
        set(value) {
          this._searchField = value
        }
     }
    }
  };
</script>