Vue.js - 상태에 따라 v-model을 라우팅 매개 변수에 동적으로 바인딩하는 방법

Vue.js - 상태에 따라 v-model을 라우팅 매개 변수에 동적으로 바인딩하는 방법

레스토랑 체인의 웹 사이트 백엔드에 전원을 공급하기 위한 애플리케이션을 만들고 있습니다.사용자는 페이지 내용과 이미지를 편집해야 합니다.사이트는 상당히 복잡하며 페이지 내에 중첩된 페이지와 섹션이 많이 있습니다.각 페이지와 섹션을 편집하는 하드코드 템플릿이 아니라 루트의 데이터를 기반으로 모든 페이지를 편집할 수 있는 표준 템플릿을 만들려고 합니다.

문자 입력 때문에 v-model에 걸렸어

라우터 코드는 다음과 같습니다.

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

그럼 내 구역에서.vue, 여기 v-model에 대한 제 의견이 있습니다.이 경우 레스토랑의 시작 섹션을 편집하려고 합니다.Welcome 텍스트를 편집하기 위한 페이지만 작성하면 문제 없습니다.

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

이 문제는 처리해야 할 섹션이 약 40개이기 때문에 v-model의 "시작" 부분을 동적으로 참조해야 한다는 것입니다.

이것으로 편집할 섹션을 참조할 수 있습니다.$route.params.부분.v-model=을 사용할 수 있으면 좋겠습니다."restInfo.+ 섹션"이지만, 동작하지 않습니다.

경로 매개 변수를 기반으로 v-model을 업데이트하는 방법이 있습니까?

감사합니다!

업데이트...

여기 내 구역 전체가 있다.표시하다

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

브래킷 액세스 장치를 사용해 보십시오.[]대신.:

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

언급URL : https://stackoverflow.com/questions/64812622/vue-js-how-to-dynamically-bind-v-model-to-route-parameters-based-on-state