Vue子组件出现Write operation failed: computed value is readonly报错排查

你遇到的Write operation failed: computed value is readonly报错，核心原因是你把一个只读的计算属性直接绑定到了v-model上。

在子组件中，value是一个仅返回props.modelValue的计算属性，默认情况下Vue的计算属性是只读的。而vue-multiselect的v-model会尝试修改绑定的值，当它试图修改这个只读的计算属性时，就会触发这个报错。

你需要把value改成一个可读写的计算属性，同时处理好与父组件modelValue的同步：

<script setup>
import VueMultiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.css'
import {defineEmits, computed} from "vue";

const props = defineProps({
        modelValue: {
          type: Array,
          default: () => [] // 给props设置默认值更安全
        },
        options: {
          type: Array,
          default: () => []
        }
});
const emit = defineEmits(['update:modelValue']);

// 修改为可读写的计算属性
const value = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emit('update:modelValue', newVal)
  }
})

// 注意：这里可以去掉@update:model-value事件监听，因为v-model已经通过计算属性的setter处理了同步
</script>

<template>
    <div>
        <vue-multiselect
            v-model="value"
            :options="options"
            :multiple="true"
            placeholder="Dil Seçin"
            label="name"
            track-by="name"
            :searchable="false"
            select-label="Seç"
            selected-label="Seçili"
            deselect-label="Seçimi Kaldır"
            :allow-empty="false">
        </vue-multiselect>
    </div>
</template>

• 移除了子组件中的@update:model-value="inputChanged"事件，因为可读写的计算属性已经通过set方法完成了向父组件的同步，不需要额外监听事件。
• 给props添加了默认值，避免父组件未传递时出现undefined的问题。
• 保持了原有的功能逻辑，同时解决了控制台报错的问题。

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