Vue.js - How to dynamically bind v-model to route parameters based on state

Question

I'm building an application to power the backend of a website for a restaurant chain. Users will need to edit page content and images. The site is fairly complex and there are lots of nested pages and sections within those pages. Rather than hardcode templates to edit each page and section, I'm trying to make a standard template that can edit all pages based on data from the route.

I'm getting stuck on the v-model for my text input.

Here's my router code:

{
          path: '/dashboard/:id/sections/:section',
          name: 'section',
          component: () => import('../views/Dashboard/Restaurants/Restaurant/Sections/Section.vue'),
          meta: {
            requiresAuth: true
          },
        },

Then, in my Section.vue, here is my input with the v-model. In this case, I'm trying to edit the Welcome section of a restaurant. If I was building just a page to edit the Welcome text, it would work no problem.:

<vue-editor v-model="restInfo.welcome" placeholder="Update Text"></vue-editor>

This issue is that I need to reference the "welcome" part of the v-model dynamically, because I've got about 40 Sections to deal with.

I can reference the Section to edit with this.$route.params.section. It would be great if I could use v-model=" restInfo. + section", but that doesn't work.

Is there a way to update v-model based on the route parameters?

Thanks!

Update...

Here is my entire Section.vue

<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>

Answer 1

Try to use the brackets accessor [] instead of . :

 <vue-editor v-model="restInfo[section]"