Embarking on building an MVP for the first time in web development. Leveraging Vue2 and Firebase, progress has been smooth up until now.
However, a roadblock has emerged that I am unable to navigate solo. Though the concept is clear in my mind, translating it into code has proven elusive. Seeking assistance from the community to unravel my thoughts, as I find myself tangled in confusion and frustration :D
Let's assess the current situation:
Child Component Having constructed a child component comprising a form with three text areas, let's examine one snippet for simplicity.
<template>
<div class="wrap">
<form class="form">
<p class="label">Headline</p>
<textarea rows="2"
v-model="propHeadline"
:readonly="readonly">
</textarea>
// To switch between read and edit
<button
v-if="readonly"
@click.prevent="togglemode()">
edit
</button>
<button
v-else
type="submit"
@click.prevent="togglemode(), updatePost()"
>
save
</button>
</form>
</div>
</template>
<script>
export default {
name: 'PostComponent',
data() {
return {
readonly: true
}
},
props: {
propHeadline: {
type: String,
required: true
}
},
methods: {
togglemode() {
if (this.readonly) {
this.readonly = false
} else {
this.readonly = true
}
},
updatePost() {
// updates it to the API - that works
}
}
}
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><template>
<div class="wrap">
<PostComponent
v-for="post in posts"
:key="post.id"
:knugHeadline="post.headline"
/>
</div>
</template>
<script>
import PostComponent from '@/components/PostComponent.vue'
export default {
components: { PostComponent },
data() {
return {
posts: []
}
},
created() {
// Fetches all posts from DB and populates them in array "posts"
}
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>Current Status Seemingly, everything functions as intended. Posts are displayed effectively, and editing followed by saving modifications reflects seamlessly onto Firebase - impressive!
Problem / Error Message An error message surfaces, stating:
[Vue warn]: 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.
The directive suggests employing a computed property linked to the prop's value. How can this objective be accomplished?
Solution Approach It appears imperative to harness a computed getter to retrieve the prop value - any guidance on implementing this aspect would be greatly appreciated.
Furthermore, utilizing the setter to dispatch an event to the parent for updating the value so that the prop conveys the updated information back down - insights on achieving this are welcomed.
In my quest for resolution, online resources have offered fragmented solutions, painting a picture of harmonious families exchanging small bundles of data...
Your insight on navigating this challenge would be met with immense gratitude! :)
Many thanks in advance!