vuejs 모달로 편집 수행

vuejs 모달로 편집 수행

제목은 실제 문제가 무엇인지 간단히 설명합니다. 기본적으로 많은 요소(예: 표, 단락, 제목)가 포함된 대시보드가 있습니다. 이러한 요소는 각각 Docx 문서 구성에 해당합니다.

이러한 요소 중 하나를 클릭할 때마다 새로운 모달(modal)이 열립니다.여기서 요소를 작성하기 위한 일부 파라미터를 변경할 수 있습니다.예를 들어 단락에서는 정렬, 색상 및 텍스트를 변경할 수 있습니다.

이 요소를 클릭하여 추가하면 내 페이지 섹션에 블록으로 추가되며 블록 상단을 클릭하여 각 블록의 속성을 변경할 수 있습니다.

새 모달(대시보드를 열었을 때 편집하기 위해 추가하는 대신 다른 모달)을 열고 싶습니다.

문제는 스파게티 코드를 엉망으로 만들지 않고서는 어떻게 하는 것이 가장 좋은지 모른다는 것입니다.

현재 저는 이 방법을 사용하고 있습니다.

다음과 같은 대시보드 컴포넌트가 있습니다.

<template>
    <div class="navbar navbar-custom navbar-fixed-left navSize">
        <form class="navbar-form margin-above" role="search">
            <div class="input-group add-on">
                <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
            </div>
        </form>
        <h4 class="text-center">Doc Sections</h4>
        <div @click="changeView('appTable')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Table</h4>
            </div>
        </div>

        <div @click="changeView('appParagraph')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Paragraph</h4>
            </div>
        </div>
        <div @click="changeView('appImage')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Image</h4>
            </div>
        </div>
        <div @click="changeView('appBulletList')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Bullet List</h4>
            </div>
        </div>
        <div @click="changeView('appHeading')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Heading</h4>
            </div>
        </div>
        <div @click="changeView('appBreak')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Break</h4>
            </div>
        </div>
    </div>
</template>


<script>

export default {
    data() {
        return {
            text: "",
            fontSize: 14,
            key: "Paragraph",
            paragraph: {},

        }
    },
    methods: {
        addParagraph() {
            this.$set(this.paragraph, 'key', this.key);
            this.$set(this.paragraph, 'text', this.text);
            this.$set(this.paragraph, 'fontSize', this.fontSize);
            this.$store.commit("appendToDocument", this.paragraph)
        },
        changeView: function (view) {
            this.$store.commit("changeCurrentView", view);
            this.show();
        },
        show() {
            this.$modal.show('modalSection');
        },
        hide() {
            this.$modal.hide('modalSection');
        },
        hey() {
            console.log("HEY");
        }
    },
}
</script>

변경 뷰는 모달 렌더링해야 하는 새 컴포넌트를 vuex로 전송합니다.vuex 스토어에 다음 컴포넌트가 있습니다.

 currentView: 'appTable',



  changeCurrentView: (state, view) => {
        state.currentView = view;
    },

[ Create file ]템플릿에는 클릭하는 컴포넌트를 다음과 같이 렌더링할 수 있습니다.

 <modal name="modalSection">
        <component :is="getView">
        </component>
    </modal>

computed:{
    getView(){
        return this.$store.getters.getCurrentView;
    }
},

다시 currentView 클릭 시 vuex에 접속하여 렌더링된 컴포넌트를 변경합니다.이 페이지에는 표시되는 컴포넌트도 로드하고 있습니다만, 그 동작에 관한 중요한 부분은 이미 표시되어 있습니다.각 컴포넌트에는 각각 독자적인 속성이 있습니다.예를 들어 표에는 1개의 컴포넌트 안에 (행의 수, 열의 수)와 같은 속성이 포함되어 있습니다.

다른 컴포넌트에서 편집할 수 있도록 모든 컴포넌트의 속성을 vuex로 전달해야 합니까?아니면 더 좋은 방법이 있을까요?

감사합니다.

언급URL : https://stackoverflow.com/questions/45714463/perform-editing-with-vuejs-modal