如何在 Nuxt 中创建 v-model 自定义组件

Question

我在 Next 中遇到自定义组件的双向绑定问题。也许我在某个地方犯了一个愚蠢的错误。如果有任何帮助，我将不胜感激

#自定义组件Input.vue

<template>
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" class="input" type="text">   
</template>

<script>
export default {
    props:{
        modelValue:String,
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/_shared.scss';

.input{
    padding: 10px 15px;
    background: white;
    border: 1px solid #cecece;
    border-radius: 4px;
}
</style>

#Page index.vue

<template>
    <section class="new-appeal">
        <form class="new-appeal-form">
            <label class="new-appeal-form-item">
                <Input placeholder="Appeal" v-model.trim="cashier_name"/>
            </label>
            <Button class="submit">Creare appeal</Button>
        </form>
    </section>
</template>

<script>


export default {
    layout:'main',
    data:function(){
        return{
            cashier_name:''
        }
    },
}
</script>

如您所见，我正在尝试进行双向数据绑定，但不幸的是它不起作用

Answer 1

在 Vue 2 中，默认的 v-model 值只是 value，为了更新值，您必须发出 input 事件。你不能在 vue 2 中使用update:modelValue。 你应该使用这种方式，

<Input placeholder="Appeal" v-model.trim="cashier_name"/>

在您的自定义输入组件中

<template>
    <input :value="value" @input="$emit('input', $event.target.value)" class="input" type="text">   
</template>

<script>
  export default {
    props: ['value']
  }
</script>

Answer 2

这很好用并且遵循惯例。

index.vue

<template>
  <section class="new-appeal">
    <form class="new-appeal-form">
      <label class="new-appeal-form-item">
        <Input v-model.trim="cashierName" placeholder="Appeal" />
      </label>
      <Button class="submit">Creare appeal</Button>
    </form>
  </section>
</template>

<script>
export default {
  layout: 'main',
  data() {
    return {
      cashierName: '',
    }
  },
}
</script>

Input.vue

<template>
  <input
    :value="cashierName"
    class="input"
    type="text"
    @input="$emit('input', $event.target.value)"
  />
</template>

<script>
export default {
  name: 'Input',
  props: {
    cashierName: {
      type: String,
      default: '',
    },
  },
}
</script>

---

否则，您也可以使用以下方式（我仍在将 cashier_name 重命名为 camelCase）

index.vue

<template>
  <section class="new-appeal">
    <form class="new-appeal-form">
      <label class="new-appeal-form-item">
        <Input v-model.trim="cashierName" placeholder="Appeal" />
      </label>
      <Button class="submit">Creare appeal</Button>
    </form>
  </section>
</template>

<script>
export default {
  layout: 'main',
  data() {
    return {
      cashierName: '',
    }
  },
}
</script>

Input.vue

<template>
  <input
    :value="cashierName"
    class="input"
    type="text"
    @input="$emit('update:cashierName', $event.target.value)"
  />
</template>

<script>
export default {
  name: 'Input',
  // https://vuejs.org/v2/api/#model
  model: {
    prop: 'cashierName',
    event: 'update:cashierName',
  },
  props: {
    cashierName: {
      type: String,
      default: '',
    },
  },
}
</script>