Error in v-on handler: “ReferenceError: number is not defined”

I started working on small project using Laravel and Vue.js. I tried to use v-model to set a value, but I get an error as seen below:

<a href="#" class="dropdown-item" @click.prevent="edit" v-model="number = 1">
  <i class="icon-file-text2"></i> Modifier
</a>

data: function() {
  return {
    searchInput: '',
    buildings: {},
    number: null
  }
}

Error message that I get:

Error in v-on handler: "ReferenceError: number is not defined"

Answer

v-model takes the name of a local data prop, so you should not use an expression there. However, v-model only makes sense for user input elements (e.g., <input>, <select>, etc.), not for readonly elements, such as <a>.

If you intended to set number to 1 upon clicking <a>, I recommend moving that code into the edit() method already bound to the click-event:

export default {
  methods: {
    edit() {
      this.number = 1
    }
  }
}