Vue.js의 작업 속성이 할 일 목록 앱에서 예기치 않게 변경되었습니다.

Question

상태, 변경 사항, getter 등이 포함된 저장소가 있습니다. 상태에는 다음 작업 목록이 포함됩니다.

const state = {
   작업:[{
     제목: "일어나라",
     완료: 거짓
   },
   {
     제목: "프로젝트 2",
     완료: 거짓
   },
  ]
}

Todo.vue

<템플릿>
   <Task v-for="(task,key) in task" :id="key" :task="task" :key="key" />
</템플릿>
<스크립트>
'vue'에서 {defineComponent }를 가져옵니다.
'../comComponents/Task.vue'에서 작업 가져오기
'vuex'에서 {mapGetters} 가져오기

기본 정의 내보내기({
  이름: '페이지인덱스',
  구성요소:{
    일
  },
  계산됨:{
    ...mapGetters('task', ['tasks']) //작업 모듈에서 작업 가져오기
  },
})

<p><code>task.vue</code></p>
<pre class="brush:php;toolbar:false;"><템플릿>
    <q-항목
        클릭 가능
        :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
        V-리플>
        <q-item-섹션 측면 상단>
          <q-checkbox v-model="task.completed" /> /////////////// 문제는 이 줄에 있습니다.
        </q-item-section>

        <q-item-section>
          <q-item-label :class="{'text-strikethrough' :
          task.completed}">{{task.name}}</q-item-label>
        </q-item-section>
      </q-item>
</템플릿>

<스크립트>
    'vuex'에서 {mapActions} 가져오기
    기본값 내보내기 {
        props: ["작업"],
    }

<p>위 코드에서 Task.vue</p>
<pre class="brush:php;toolbar:false;"><q-checkbox v-model="task.completed"

문제는 이 줄에 있습니다. 위에 제공된 코드에서 v-model="task.completed"를 제거하면 모든 것이 잘 작동합니다. 그렇지 않으면 Unexpected mutation of "task" prop< /코드>

Answer 1

문제는 돌연변이 외부에서 prop과 해당 vuex 상태를 변경하려고 한다는 것입니다. v-model指令将创建一个双向数据绑定。你的task prop引用了状态中的一个对象，当q-checkbox改变task.completed 값에 값을 전달하면 해당 상태에서 객체가 직접 업데이트됩니다. 대신 작업을 업데이트하는 변형을 만들어야 합니다.

으아악

그런 다음 템플릿에서 이 돌연변이를 사용할 수 있습니다

으아악

또한 q-checkbox컴포넌트의 실제 소품 및 이벤트 이름은 구현 방법에 따라 달라질 수 있습니다