I'm currently in the process of developing an application that will serve as the backbone for a restaurant chain's website. The main functionality involves allowing users to modify page content and images. Given the complexity of the site with its numerous nested pages and sections, I've opted against hardcoding templates for each specific page or section edit. Instead, my approach is centered around creating a standardized template that can accommodate edits for all pages based on data retrieved from the route.
My current hurdle lies in implementing the v-model for my text input field.
Below is a snippet of my router code:
{
path: '/dashboard/:id/sections/:section',
name: 'section',
component: () => import('../views/Dashboard/Restaurants/Restaurant/Sections/Section.vue'),
meta: {
requiresAuth: true
},
},
Within my Section.vue file, you'll find the following segment containing the text input field equipped with a v-model attribute. In this instance, I'm focusing on editing the "Welcome" section of a restaurant. While it would function flawlessly if designed solely for editing the Welcome text, the challenge arises when dealing with approximately 40 different sections:
<vue-editor v-model="restInfo.welcome" placeholder="Update Text"></vue-editor>
The issue at hand involves dynamically referencing the "welcome" portion within the v-model. Considering the need to address a myriad of Sections, it becomes essential to update the v-model based on the route parameters for seamless functionality. Though attempting to use v-model="restInfo. + section" proves ineffective.
Is there any viable solution to adjusting the v-model based on the specifics outlined in the route parameters?
Thank you in advance!
Additional Information...
Feel free to peruse through my comprehensive Section.vue below:
<template>
<div>
<Breadcrumbs :items="crumbs" />
<div v-if="restInfo">
<h3>Update {{section}}</h3>
<div class="flex flex-wrap">
<div class="form__content">
<form @submit.prevent>
<vue-editor v-model="restInfo.welcome" placeholder="Update Text"></vue-editor>
<div class="flex">
<button class="btn btn__primary mb-3" @click="editText()">
Update
<transition name="fade">
<span class="ml-2" v-if="performingRequest">
<i class="fa fa-spinner fa-spin"></i>
</span>
</transition>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { VueEditor } from "vue2-editor"
import Loader from '@/components/Loader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
export default {
data() {
return {
performingRequest: false,
}
},
created () {
this.$store.dispatch("getRestFromId", this.$route.params.id);
},
computed: {
...mapState(['currentUser', 'restInfo']),
section() {
return this.$route.params.section
},
identifier() {
return this.restInfo.id
},
model() {
return this.restInfo.id + `.` + this.section
},
crumbs () {
if (this.restInfo) {
let rest = this.restInfo
let crumbsArray = []
let step1 = { title: "Dashboard", to: { name: "dashboard"}}
let step2 = { title: rest.name, to: { name: "resthome"}}
let step3 = { title: 'Page Sections', to: { name: 'restsections'}}
let step4 = { title: this.$route.params.section, to: false}
crumbsArray.push(step1)
crumbsArray.push(step2)
crumbsArray.push(step3)
crumbsArray.push(step4)
return crumbsArray
} else {
return []
}
},
},
methods: {
editText() {
this.performingRequest = true
this.$store.dispatch("updateRest", {
id: this.rest.id,
content: this.rest
});
setTimeout(() => {
this.performingRequest = false
}, 2000)
}
},
components: {
Loader,
VueEditor,
Breadcrumbs
},
beforeDestroy(){
this.performingRequest = false
delete this.performingRequest
}
}
</script>