Vue3(3.3.8)结合Tagify(4.17.9)使用v-model报错的解决方法

你遇到的报错核心原因是：Vue3 中组件的 prop 是只读属性，不能直接用 v-model 绑定。v-model 本质是 v-bind:value 加 v-on:input 的语法糖，会尝试修改绑定变量，但组件内部不允许直接修改 prop，因此触发了这个错误。

以下是具体的修复方案：

1. 修复 textarea 的绑定问题 #

把原来直接用 v-model 绑定 prop 的代码：

<textarea v-if="mode === 'textarea'" v-model="value"/>

替换为拆分后的绑定写法，通过事件通知父组件更新数据：

<textarea v-if="mode === 'textarea'" :value="value" @input="$emit('update:value', $event.target.value)"/>

2. 处理 Tagify 输入框的双向同步 #

因为 Tagify 会封装原生 input，需要监听其自身事件来同步值，完整组件示例如下：

<template>
  <textarea v-if="mode === 'textarea'" :value="value" @input="handleTextareaInput" />
  <input v-else :value="value" ref="tagifyInput" />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Tagify from '@yaireo/tagify'

// 定义组件接收的 props
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  mode: {
    type: String,
    default: 'input'
  }
})

// 定义用于通知父组件更新的事件
const emit = defineEmits(['update:value'])

const tagifyInput = ref(null)
let tagifyInstance = null

// 处理 textarea 输入事件
const handleTextareaInput = (e) => {
  emit('update:value', e.target.value)
}

onMounted(() => {
  // 仅在非 textarea 模式下初始化 Tagify
  if (props.mode !== 'textarea' && tagifyInput.value) {
    tagifyInstance = new Tagify(tagifyInput.value, {
      // 这里添加你的 Tagify 配置项，比如分隔符、最大标签数等
      delimiters: ',',
      maxTags: 10
    })

    // 监听 Tagify 的 change 事件，同步值到父组件
    tagifyInstance.on('change', (event) => {
      const newValue = event.detail.value.map(tag => tag.value).join(',')
      emit('update:value', newValue)
    })
  }
})

// 监听父组件传入的 value 变化，同步更新 Tagify 实例
watch(() => props.value, (newValue) => {
  if (tagifyInstance) {
    tagifyInstance.loadOriginalValues(newValue)
  }
})
</script>

3. 父组件使用方式 #

父组件中依然可以用 v-model 绑定你的 Tagify 组件，因为我们实现了 update:value 事件，Vue 会自动识别并完成双向绑定：

<Tagify v-model="tags" mode="input" />

内容的提问来源于stack exchange，提问作者DoDr