vue/no-v-model-argument 'v-model' directives require no argument.eslint-plugin-vue

Question

I want to display firstname and lastname through Introduction.vue. In InformationField.vue i am declaring the props. and calling them in Introduction.vue by v-model:propsname ="form.introduction.propsname" . i am getting error inside <InformationField v-model .

Introduction.vue

<template>
  <form>
    <InformationField
      v-model:firstname="form.introduction.firstname"
      v-model:lastname="form.introduction.lastname"
    />
  </form>
</template>

<script>
import InformationField from './InformationField.vue';
export default {
  components: {
    InformationField,
  },
  setup(){
    const form = ref({
      introduction:{
        firstname: '',
        lastname: '',
      }
    })
  }
};
</script>

InformationField.vue

<template>
  <div>
      <label>
        Firstname
        <input
          type="text"
          @input="$emit('update:firstname', $event.target.value)"
          :value="firstname"
          ref="firstnameRef"
          placeholder="firstname"
        />
      </label>
      <label>
        Lastname
        <input
          type="text"
          @input="$emit('update:lastname', $event.target.value)"
          :value="lastname"
          placeholder="lastname"
        />
      </label>
  </div>
</template>

<script>
export default {
  props: {
    firstname: {
      type: String,
      default: "",
    },
    lastname: {
      type: String,
      default: "",
    }
  },
};
</script>

Pasley

Should firstname and lastname really be separate? If they aren't, they could be stored in a single object. Otherwise disable the rule, it's harmful. – Harsh

Thanks @EstusFlask for your comment, Actually like firstname and last there will be more fields like these, so i have to make them separate. – Pasley

I mean that you could do v-model="form.introduction" in case it acts as form model – Harsh

Hi @EstusFlask, then it is showing error in v-model(syntax error) – Pasley

I'm not sure what the error refers to and what it looks like in your case. But it's supposed to be simple and documented syntax. Any way, that's the point. You don't need multiple named v-model directives if you can easily end up with default v-model only, that's what this linter rule is about – Harsh

In my case I was using vue 2 rofl – Keeley

Answer 1

As written in this answer, I solved this issue by adding the following rule inside the rules property in .eslintrc.js:

"vue/no-v-model-argument": "off"

Affiche