I am facing an issue with reusing a custom dropdown that I have created in my component file where props are the value options in the dropdown. When I try to select the dropdown, I get a Vue warning message:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use data or computed property based on the prop's value. Prop being mutated: "item"
What is the best practice and how should I write this to avoid mutating the prop value?
<template>
<v-app>
<SearchSelect
v-model="newItem.a"
:options="aList"></SearchSelect>
<SearchSelect
v-model="newItem.b"
:options="bList"></SearchSelect>
<SearchSelect
v-model="newItem.c"
:options="cList"></SearchSelect>
</v-app>
</template>
<script>
export default {
name: "Sales",
data() {
return {
aList: [
{ value: "A1", text: "A1" },
{ value: "A2", text: "A2" },
{ value: "A3", text: "A3" },
{ value: "A4", text: "A4" },
{ value: "A5", text: "A5" }
],
bList: [
{ value: "B1", text: "B1" },
{ value: "B2", text: "B2" },
{ value: "B3", text: "B3" }
],
cList: [
{ value: "C1", text: "C1" },
{ value: "C2", text: "C2" },
{ value: "C3", text: "C3" }
],
}
}
}
};
</script>