Vue v-model naming best practice

Question

I'm just looking for a bit of best practice advise with the Vue v-model naming convention.

I've seen code which just uses a single name like this:

<input name="surname" v-model="surname"/>

export default {
  data: function () {
    return {
      surname: '',

I've also seen it done with dot notation like this:

<input name="surname" v-model="customer.surname"/>

export default {
  data: function () {
    return {
      customer: {
        surname: undefined
      }
    },

Is there a best practice naming convention or is it just a case of whatever you prefer?

I'm just trying to avoid any potential pitfalls while I'm learning rather than stumble across them later.

Answer 1

This is not question related to v-model. v-model is just binding to component's data and what you are asking of these properties.

There is no general rule. Both of your examples can be right in different cases. Readability counts.

I would use first eg. for Customer component. Where it's clear that surname is customer attribute and repeating word customer in property names is redundant.

Using customer.surname may adequate in cases where component keeps multiple object, not only customer and you want to be clear where surname belongs.

Also when passing customer as object from parent component you probably ends with binding to customer.surname