I'm working on a project where I use electron-vue and to make the app look better I use bootstrap-vue. After a lot of debugging, I have found that changing a data property(in the parent component) that is linked to bootstrap components props. It will give me error messages telling me not to mutate props values, and that they are read-only. As it seems for me, the code works and executes, but will give me a lot of errors in the console. When I say it seems to work, what I mean is that both console.log and visually on bootstrap component it seems to change the variables correctly.
After writing a lot of test cases I have found out that changing a data property does not give an error. But when changing a data property that is linked to a bootstrap component prop it will.
A test case that shows where these error messages show up is in the code below:
<template>
<b-progress :max="maxNumberOfFiles" show-value>
<b-progress-bar :value="currentNumberOfErrorFiles"
:max="maxNumberOfFiles"
variant="danger"
show-value
/>
</b-progress>
</template>
export default {
data() {
maxNumberOfFiles: 1,
currentNumberOfErrorFiles: 0
},
methods {
test: function() {
currentNumberOfErrorFiles = 1;
}
}
}
The code above will result in 3 errors:
- $attrs is readonly
- $listeners is readonly
- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
But this code produces zero errors:
<template>
<progress :value="currentNumberOfErrorFiles"
:max="maxNumberOfFiles"
>
</progress>
</template>
export default {
data() {
maxNumberOfFiles: 1,
currentNumberOfErrorFiles: 0
},
methods {
test: function() {
currentNumberOfErrorFiles = 1;
}
}
}
I have tried to use google for similar problems and look at the doc for both electron-vue and bootstrap-vue, and can't find anything that helped me. Is there anyone that have run into the same problem or have a solution on how to get rid of those errors?
