어레이의 항목을 업데이트하면 모든 항목이 업데이트됩니다.

어레이의 항목을 업데이트하면 모든 항목이 업데이트됩니다.

프로젝트를 사용하는 vuex를 사용하여 vuej를 사용하는 애플리케이션을 만들고 있으며, 각 프로젝트마다 1개 이상의 작업이 있습니다.

작업을 추가, 삭제 및 업데이트할 수 있습니다.추가 및 삭제는 완벽하게 수행되지만 업데이트는 수행되지 않습니다.

vuex 개발 도구의 상태:

내 HTML:

<div class="job-compact row" v-for="(job, index) in project.jobs">
        <div class="col-md-6">
            <div class="form-group" :class="{'has-error' : errors.has('jobs.' + index + '.function')}">
                <input type="text" name="jobs[function][]" class="form-control" v-model="job.function" @change="updateJobValue(index, 'function', $event.target.value)"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group" :class="{'has-error' : errors.has('jobs.' + index + '.profiles')}">
                <input type="number" name="jobs[profiles][]" class="form-control" v-model="job.profiles" @change="updateJobValue(index, 'profiles', $event.target.value)"/>
            </div>
        </div>
        <div class="col-md-2">
            <button v-if="index == 0" class="btn btn-success btn-sm" @click="addJob"><i class="fa fa-plus"></i></button>
            <button v-if="index > 0" class="btn btn-danger btn-sm" @click="deleteJob(index);"><i class="fa fa-minus"></i></button>
        </div>
    </div>

보다시피, 저는...v-for내 직업을 다 보여주는 거야작업 내에서 값을 편집할 때는@changeevent를 사용하여 값을 갱신합니다.그리고 맨 아래에는 작업 행을 추가하거나 제거하는 두 개의 버튼이 있습니다.

저희 가게는 모듈로 나누어져 있습니다.메인 스토어는 다음과 같습니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {};

const getters = {};

const mutations = {};

const actions = {};

//Separate Module States
import jobCreator from './modules/job-creator/store';

export default new Vuex.Store({
    modules: {
        jobCreator: jobCreator
    },
    state,
    actions,
    mutations,
    getters
});

이 특정 문제에 대한 모듈스토어:

import store from './../../store'

const state = {
    project: {
        title: null,
        description: null,
        jobs: []
    },
    defaultJob: {
        function: '',
        title: '',
        description: '',
        profiles: 1,
        location_id: '',
        category_id: '',
        budget: '',
    },
};

const getters = {}

const mutations = {

    addJob(state, job) {
        state.project.jobs.push(job);
    },
    deleteJob(state, index) {
        state.project.jobs.splice(index, 1);
    },
    updateJobValue(state, params) {
        Object.assign(state.project.jobs[params.jobIndex], {
            [params.field]: params.value
        });
    }
};

const actions = {
    addJob: function (context) {
        context.commit('addJob', state.defaultJob);
    },
    deleteJob: function (context, index) {
        context.commit('deleteJob', index);
    },
    updateJobValue: function (context, params) {
        context.commit('updateJobValue', params);
    },
};

const module = {
    state,
    getters,
    mutations,
    actions
};

export default module;

프로젝트 상태는 내 vue 인스턴스의 계산된 속성에 매핑됩니다.

computed: {
       ...mapState({
           project: state => state.jobCreator.project,
       }),
}

문제는 다음과 같습니다.어플리케이션 이미지에서는 어느 하나의 필드에 "vin"이라고 입력한 것을 알 수 있지만, 모든 필드가 갱신되고 있습니다.

그래서 그 모든 게function모든 작업의 필드가 내가 원하는 항목 대신 내 마지막 항목으로 업데이트되었습니다.

내가 뭘 잘못하고 있지?

PS:

돌연변이 기능에서도 다음을 시도했습니다.

updateJobValue(state, params) {
    var job = state.project.jobs[params.jobIndex];
    job[params.field] = params.value;

    Vue.set(state.project.jobs, params.jobIndex, job);
}

하지만 같은 결과를 내게 주고 있어.

업데이트: 요청하신 대로 문제를 보여주기 위해 jsFiddle을 만들었습니다.

이 문제는 고객님의addJob액션:

addJob: function (context) {
    context.commit('addJob', state.defaultJob);
},

를 참조하고 있습니다.state.defaultJob새 작업을 추가할 때마다 오브젝트를 지정합니다.즉, 각 아이템은state.project.jobs어레이가 같은 개체를 참조하고 있습니다.

오브젝트를 에 전달할 때는 오브젝트의 복사본을 작성해야 합니다.addJob변환:

addJob: function (context) {
    context.commit('addJob', Object.assign({}, state.defaultJob));
},

또는 매번 기본 속성을 사용하여 새 개체를 전달합니다.

addJob: function (context) {
    context.commit('addJob', {
        function: '',
        title: '',
        description: '',
        profiles: 1,
        location_id: '',
        category_id: '',
        budget: '',
    });
},

여기 작동하는 바이올린이 있습니다.

Javascript에서 변수 전달 방법을 설명하는 게시물입니다. 참조별 Javascript vs. 값별.

저는 다음과 같은 조언을 드리고 싶습니다.

사용하다v-bind:value="job.function대신v-model="job.function"왜냐하면 당신은 단방향 구속만을 원하기 때문입니다.이 코드가 더 예측하기 쉬워요.

를 추가합니다.v-key="job"고객님께v-for="(job, index) in project.jobs"렌더링 기능이 제대로 작동하는지 확인하기 위해 요소를 선택합니다.

처음 두 줄은 채워야 합니다. 객체는 여전히 반응적입니다.

var job = state.project.jobs[params.jobIndex];
job[params.field] = params.value;


Vue.set(state.project.jobs, params.jobIndex, job);

PS: 내 바이올린으로@change입력 입력 또는 입력 종료 시에만 불이 났습니다.

언급URL : https://stackoverflow.com/questions/44858099/updating-an-item-in-an-array-updates-them-all