Vue.js-如何根据状态动态绑定v模型以路由参数

问题描述

我正在构建一个应用程序，以为饭店连锁店的网站后端提供动力。用户将需要编辑页面内容和图像。该站点非常复杂，并且这些页面中有很多嵌套页面和部分。我正在尝试制作一个标准模板，该模板可以根据路线中的数据来编辑所有页面，而不是用来编辑每个页面和部分的硬代码模板。

我的文本输入卡在了v模型上。

这是我的路由器代码：

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

然后在我的Section.vue中，这是我对v模型的输入。在这种情况下，我尝试编辑餐厅的“欢迎”部分。如果我仅创建一个页面来编辑“欢迎”文本，那将没有问题。

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

这个问题是我需要动态引用v模型的“欢迎”部分，因为我要处理大约40个部分。

我可以引用Section来使用this。$ route.params.section进行编辑。如果可以使用v-model =“ restInfo. + section”，那就太好了，但是那行不通。

有没有一种基于路径参数更新v模型的方法？

谢谢！

更新...

这是我的整个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>

解决方法

尝试使用方括号访问器asyncReceive代替[]：

.