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.

Whatever makes it easier for you to understand the context. Do you know surname belongs to customer? If the component only handles single customer data we might do without the customer object. But there are other uses for object that go beyond just naming conventions, like you can save few lines of code if you want to send the customer to an API or if you want to loop the object keys or add a new property. — artoju, Nov 15 '19 at 12:46
Please don't add signatures to your posts. We have some community agreement here that the profile block is sufficient authorship to "sign" posts. Meta links are available on request. Thanks! — halfer, Dec 10 '19 at 20:34

score 0 · Accepted Answer · answered Nov 15 '19 at 12:52

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

Thanks for the input guys - I hadn't thought about sending the data to an API where passing a single object rather than multiple parameters makes things slightly easier — Damian, Nov 15 '19 at 19:10

Vue v-model naming best practice

1 Answers1