Vue.js - 如何根据状态动态绑定 v-model 到路由参数

Question

我正在构建一个应用程序来为一家连锁餐厅的网站后端提供支持。用户将需要编辑页面内容和图像。该站点相当复杂，并且这些页面中有许多嵌套页面和部分。我没有硬编码模板来编辑每个页面和部分，而是尝试制作一个标准模板，可以根据路由中的数据编辑所有页面。

我的文本输入卡在 v-model 上。

这是我的路由器代码：

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

然后，在我的 Section.vue 中，这是我对 v-model 的输入。在这种情况下，我正在尝试编辑餐厅的欢迎部分。如果我只是构建一个页面来编辑欢迎文本，那将没有问题。：

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

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

我可以使用 this.$route.params.section 引用要编辑的部分。如果我可以使用 v-model="restInfo. + section" 那就太好了，但这不起作用。

有没有办法根据路由参数更新 v-model？

谢谢！

更新...

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

尝试使用方括号访问器[] 而不是.：

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