Vuex 중첩 루프, 선택/옵션에서 v-model을 처리하는 방법

Vuex 중첩 루프, 선택/옵션에서 v-model을 처리하는 방법

응용 프로그램에서 선택 옵션이 포함된 요소 목록을 표시하려면 중첩된 v-for를 사용해야 합니다.이것은 시나리오입니다.

<div class="stuck" v-for="box in items">
  <p>Pick an option for this box:</p>
  <select v-model="box">
      <option v-for="package in packages" 
              :value="package.id">{{ package.name }} </option>
  </select>
</div>

변수 항목은 Vuex 스토어에서 가져옵니다.이렇게 하면 다음과 같은 오류가 발생합니다.

v-model을 v-for 반복 별칭에 직접 바인딩하는 중입니다.별칭에 쓰는 것은 함수 로컬 변수를 수정하는 것과 같기 때문에 v-for 소스 어레이를 수정할 수 없습니다.개체 어레이를 사용하고 대신 개체 속성에 v-model을 사용하는 것이 좋습니다.

이 점을 염두에 두고 코드를 다음과 같이 변경합니다.

<div class="stuck" v-for="box in items">
  <p>Pick an option for this box:</p>
  <select v-model="box.id">
      <option v-for="package in packages" 
              :value="package.id">{{ package.name }} </option>
  </select>
</div>

방금 선택을 바꿨어요v-model에일리어스 박스에서 오른쪽 ID:box.id로 이동합니다.

이렇게 하면 모든 게... 아니면...반쪽짜리야.선택 항목에서 옵션을 선택할 경우 다음 오류가 발생했기 때문입니다.

[vuex] 변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 마십시오.

이것은 옳습니다. 왜냐하면v-model는 box.id 에 바인드 됩니다(에일리어스가 아니라 실제 값입니다).그러나 옵션을 선택하면 v-model이 Vuex 스토어에서 제공하는 box.id을 "변경하려고" 시도합니다.

간단한 시나리오에서는 vuex 스토어 변환을 피하기 위해 set/get에 대해 계산된 속성을 만듭니다.

하지만... 여기 중첩된 루프가 있어서 'box.id'에 계산을 만들 수 없습니다.

이에 대한 해결책이 있습니까?

정말 고마워.

다른 데이터 흐름 패턴을 시도할 수 있습니다.선택한 사용자가 스토어를 듣지만 직접 업데이트하지는 않습니다.

<div class="stuck" v-for="box in items">
  <p>Pick an option for this box:</p>
  <select :value="box.id" @change="updateBox">
    <option v-for="package in packages" :value="package.id">
      {{ package.name }}
    </option>
  </select>
</div>

그런 다음 선택한 옵션이 변경될 때마다 실행되는 메서드를 만듭니다.

updateBox(e) {
  const id = e.target.value;
  this.$store.commit('changeYourBox', id);
},

이 함수는 박스 ID를 변경하는 vuex 변환을 커밋해야 합니다.그러니 너도 그 변이가 필요할 거야스토어 값이 갱신되면 컴포넌트는box개체 업데이트 및 해당 저장소를 청취하는 선택 항목은 선택한 값을 그에 따라 업데이트합니다.

그러면 어디서든 스토어 값을 변경할 수 있으며 선택한 값도 변경됩니다.

이 경우 mine library vuex-dot을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

그런 상태로 가자

  {
    state: {
      boxes: []
    },
    mutations: {
      editBox(state, {target, key, value}) {
        Vue.set(target, key, value);
      }
    }
  };

다음으로 추가 컴포넌트 BoxEdit을 만듭니다.

<template>
  <div class="stuck">
    <p>Pick an option for this box:</p>
    <select v-model="id">
      <option v-for="package in packages"
              :value="package.id">{{ package.name }} </option>
    </select>
  </div>
</template>

<script>
  import { take } from 'vuex-dot'
  export default {
    props: ['box', 'packages'],
    computed: {
      ...take('box')
        .expose(['id'])
        .commit('editBox', true)
        .map()
    }
  }
</script>

그리고 이제 당신은 간단하게 쓸 수 있다.

<box-edit v-for="box in boxes" :box="box" :packages="packages"></box-edit>

서브젝트 컴포넌트 템플릿.

라이브러리 사이트 링크:https://github.com/yarsky-tgz/vuex-dot

언급URL : https://stackoverflow.com/questions/41915163/vuex-nested-loop-how-to-handle-v-model-on-select-option