Vuejs的计算值为readonly

Question

我正在用vuejs做props，但是没有错误，它正常工作，但是有我在控制台下面提到的错误，我在子组件中犯了什么样的错误?我想知道我是否在计算方面有错误，我想不出来。

Write operation failed: computed value is readonly

App.vue

<template>
<multiple-select :options="languageOptions" v-model="selectedLanguage"/>
</template>
<script setup>
const selectedLanguage = ref([])
const languageOptions = ref([
{name: 'Turkish', language: 'tr'},
{name: 'English', language: 'en'},
{name: 'Arabic', language: 'ar'},
])
</script>

<template>
<div>
<vue-multiselect
v-model="value"
:options="options"
:multiple="true"
@update:model-value="inputChanged"
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>
<script setup>
import VueMultiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.css'
import {defineEmits, computed} from "vue";
const props = defineProps({
modelValue: Array,
options: Array
});
let emit = defineEmits(['update:modelValue']);
const value = computed(() => {
return props.modelValue
})
function inputChanged(e) {
emit('update:modelValue', e)
}
</script>

Answer 1

你可以用getter和setter来定义computed，我认为这会解决你的问题:

const value = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
});
function inputChanged(e) {
value = e
}