Vuetify 콤보 상자 항목 템플릿이 vuex로 업데이트되지 않음

Vuetify 콤보 상자 항목 템플릿이 vuex로 업데이트되지 않음

아이템과 선택 슬롯이 있는 Vuetify 콤보박스를 사용하고 있습니다.항목을 선택 취소하면 vuex 스토어가 업데이트되고 있습니다.그러나 선택한 항목 중 하나를 스토어에서 제거하면 선택 슬롯이 업데이트되지만 항목 슬롯은 업데이트되지 않습니다.

다음은 코드펜입니다.제가 무엇을 빠뜨리고 있나요?

https://codepen.io/mjchaudhari/pen/xxRVavx?editors=1011

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-combobox
        v-model="values"
        :items="items"
        label="Select Item"
        multiple
      >
        <template v-slot:selection="{ item, index }">
          <v-chip v-if="index <= 1">
            <span>{{ item }}</span>
          </v-chip>
          <span
            v-if="index === 2"
            class="grey--text caption"
          >
            (+{{ values.length - 2 }} others)
          </span>
        </template>
        <template v-slot:item="{ active, item, attrs, on }">
          <v-list-item v-on="on" >
            <v-list-item-action>
              <v-checkbox :input-value="active"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              {{item.id}} - {{item.name}}
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-combobox>
    </v-container>
    <div v-for="v in values">
      <span>{{v.name}}</span> <v-btn v-on:click="deleteVal(v)">X</v-btn>
    </div>
  </v-app>
  
</div>


const store = new Vuex.Store({
  state: {
    items: [
      {id: 1, name:'foo'}, {id: 2, name:'bar'}, {id: 3, name:'fizz'},
      {id: 4, name:'buzz'}, {id: 5, name:'fizzbuzz'}, {id: 6, name:'foobar-foo'}
    ],
    values: []
  },
  mutations: {
    'update-values': function(state, values=[]) {
      state.values = values
    }
  }
})
import { mapState, mapMutations } from "https://cdn.skypack.dev/vuex"
new Vue({
  el: '#app',
  store,
  vuetify: new Vuetify(),
  data: () => ({
  }),
  computed: {
    ...mapState({
      items: state => state.items,
      values: state => state.values
    }),
    values: {
      get: function () {
        return this.$store.state.values
      },
      set: function (val) {
        this.updateSelectedVal(val)
      }
    }
  },
  methods: {
    ...mapMutations({
      updateSelectedVal: 'update-values'
    }),
    deleteVal(val) {
      let idx = this.values.findIndex(v=> v.id === val.id)
      let vals = [...this.values]
      vals = vals.splice(idx,1)
      console.log(vals)
      this.updateSelectedVal(vals)
      
    }
  }
  
})

상태 값을 업데이트할 때 값의 복사본을 만듭니다.

mutations: {
  'update-values': function(state, values=[]) {
    state.values = [...values];
  }
}

또는, 보다 단순하고 좋은 대체 솔루션은 복사본을 스플라이스하는 것이 아니라 원본(주정부 정책)을 스플라이스하는 것입니다.values)의 경우,delete-value변환:

mutations: {
  'delete-value': function(state, index) {
    state.values.splice(index, 1);
  }
}

그리고 당연히 다음과 같이 부릅니다.

deleteVal (val) {
  let idx = this.values.findIndex(v=> v.id === val.id);
  if (index > -1) {
    this.$store.commit('delete-value', index)
  }
}

---

더 간단하게, 지도만 작성하면delete-value돌연변이를 불러내다key마크업 : https://codepen.io/andrei-gheorghiu/pen/xxRVQPp?editors=1011

---

사이드 노트:당신의.:input-value상태가 잘못된 것 같습니다.다음 중 하나여야 합니다.

<v-checkbox :input-value="values.includes(item)"></v-checkbox>

내 버전에서는 수정했지만, 네 버전에서는 체크박스의 라벨을 클릭하면 표시되는 선택 항목이 실제 선택 항목과 동기화되지 않습니다.

언급URL : https://stackoverflow.com/questions/66090278/vuetify-combobox-item-template-is-not-updating-with-vuex