How do you change value attribute of an input tag in vue.js onclick?

Question

So I have a component called TitleForm which contains an input and a button and what I simply want is that whenever I click the button to set the value attr to blank. However whenever I try that I get the error Method "resetValue" has type "object" in the component definition. Did you reference the function correctly? Method "resetValue" has type "object" in the component definition. Did you reference the function correctly?

TitleForm has a prop so the input value can be set to a specific value whenever it needs to.

<template lang="html">
  <div class="title-form">
    <input type="text" id="title" :value="value" placeholder="Enter title" autocomplete="off">
    <div class="buttons">
    <button @click="resetValue" id="delete-button"></button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TitleForm',
  props: {
    value: String
  },
  methods: {
    resetValue: {
      function() {
        document.getElementById('title').value = '';
      }
    }
  }
}
</script>

Answer 1

You put your function inside an object. The way you have declared it, your onclick -Event is trying to call resetValue as an object which does not work.

methods: {
    resetValue: {
       function() {
          document.getElementById('title').value = '';
       }
    }
}

Instead, remove the curly braces and declare resetValue as a function:

methods: {
    resetValue: function() {
        document.getElementById('title').value = '';
    }
}

Answer 2

try

methods: {
    resetValue(){
        document.getElementById('title').value = '';
    }
}