VueJ: Vue에서 계산된 "set/get"을 사용합니다.드래그 가능 및 VueX

VueJ: Vue에서 계산된 "set/get"을 사용합니다.드래그 가능 및 VueX

"Vue"에 대한 도움을 구하고 있습니다.드래그 가능"둘째 날 드래그 가능 어레이를 올바르게 업데이트하려고 합니다.

과제는 다음과 같습니다.

• 계산된 설정/가져오기 함수를 사용하여 끌 수 있는 배열 업데이트
• 상위 항목에 대한 정보와 MySQL의 데이터를 업데이트하기 위한 Axios 함수를 포함한 끌 수 있는 항목 속성을 가져옵니다.

데이터 샘플:

{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }

렌더링 코드:

<div v-for="(category, index) in categories">
    <draggable v-bind:id="index" v-model="category.authors" :options="{group:'authorslist', draggable:'.author'}" class="draggable-row" >
    <div v-for="author in category.authors" :key="author.id" class="author" >

내가 하려는 일:

사실, 언급한 공사는 잘 진행됩니다.하지만 시각적으로만.VueX는 변환 프로세스에 대한 오류를 표시합니다.

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." Error: [vuex] Do not mutate vuex store state outside mutation handlers.

교환v-model와 함께:value이 경우 D&D는 시각적으로도 작동하지 않습니다.

많은 변종들을 시도해봤지만...하나는 - "카테고리"에 대해 계산된 속성을 만들고 "get/set" 함수를 사용하여 호출하는 것입니다.actions->mutations그들로부터.문제는...categories->set변경할 때 기능이 작동하지 않습니다.authors어레이 구조

두 번째 문제는 드래그 앤 드롭입니다.author사이에categories그런 방식으로 우리는 그것을 사용하는 작성자와 카테고리 ID를 얻을 수 있습니다.Axios문의합니다.

내가 쓰려고 했는데@end이벤트 BUT(!)는 정렬 프로세스에서만 작동하며 상위 요소(카테고리) 간의 D&D에서는 작동하지 않습니다.

어떤 도움이라도 주시면 정말 감사하겠습니다!

스토어 상태를 직접 변환하지 않으려면 계산된 값을 사용하여 스토어 액션을 사용해야 합니다.예를 들어 다음과 같습니다.

<draggable :id="index" v-model="authors" :options="{group:'authorslist', draggable:'.author'}">

그리고:

computed:{
 authors: {
        get() {
            return this.$store.state.authors
        },
        set(value) {
            this.$store.commit('updateAuthors', value)
        }
    }
}

언급URL : https://stackoverflow.com/questions/52938738/vuejs-use-computed-set-get-with-vue-draggable-and-vuex