vuetify의 확장 패널 문제를 해결하는 방법

vuetify의 확장 패널 문제를 해결하는 방법

컨텍스트:

나는 현재 뷔에티파이(Vuetify1.5) 확장패널을 사용하는 복잡한 어플리케이션을 작업 중인데, 확장패널이 확장된 캔버스를 바인딩/강조해야 한다.(아래 데모에서는 캔버스 대신 v-chip으로 동일한 문제를 재현했다.)

위와 같은 것을 이루기 위해 나는 아래의 단계를 따르고 있다.

S1: v-model에서 계산하여 확장/사용자 확장 패널 인덱스를 제공

S2: 색인을 항목 색인과 일치시키고 요소를 강조한다.

몇 가지 유의할 사항:

1.성능을 떨어뜨리고 전체 확장패널 구성요소를 재렌더하기 때문에 확장패널의 키로 항목지수를 사용할 수 없다.vue에서 동적 구성요소를 사용하는 동안 성능을 향상시키는 방법

2. 올바른 v-칩을 강조하기 위해 인덱스가 필요하므로 패널 v-모델에 부울 어레이를 사용할 수 없음.

문제:

확장 패널에서 사용하는 항목 배열에 새 요소를 추가/푸시하려고 하면 잘못된 캔버스/v-칩이 강조 표시되고 있다.

이것은 현존하는 이슈인 것 같고 여기서 보고되고 있다: https://github.com/vuetifyjs/vuetify/issues/11225

이 문제에 대한 해결책이 있는가?

new Vue({
  el: '#app',
  data() {
    return {
      panel: 0,
      items: [{
        name: "Three"
      }, {
        name: "Two"
      }, {
        name: "One"
      }],
      selectedIndex: 0
    }
  },
  methods: {
    addItem() {
      this.items.unshift({
        name: `Infinity ${this.items.length+1}`
      })
    }
  },
  watch: {
    panel(value) {
     // if (value) {
        this.selectedIndex = value;
   //   }
    }
  }
})

table {
  max-width: 80px;
  max-height: 68px;
  font-size: 10px;
  background-color: #ffd23f;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <div>
      <v-layout>
        <v-flex>
          <table border="1">
            <tr>
              <th>Item Index</th>
              <th>Selected index</th>
              <th>Outline</th>
            </tr>
            <tr v-for="(item,i) in items">
              <td class="text-xs-center">{{i}}</td>
              <td class="text-xs-center">{{selectedIndex}}</td>
              <td class="text-xs-center">{{i!=selectedIndex}}</td>
            </tr>
          </table>
        </v-flex>
      </v-layout>
      <v-layout>
        <v-flex md4 xs4>
          <div class="d-flex justify-between align-center mb-3">
            <v-btn icon @click="addItem">
              <v-icon>add</v-icon>
            </v-btn>
          </div>

          <v-expansion-panel v-model="panel">
            <v-expansion-panel-content v-for="(item,i) in items" :key="item.name">
              <div slot="header">Item {{item.name}}</div>
              <v-card>
                <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
              </v-card>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-flex>
        <v-flex>
          <v-spacer class="my-4" />
          <div class="text-xs-center" v-for="(item,i) in items" :key="item.name">
            <v-chip :outline="i!=selectedIndex" color="secondary">{{item.name}}</v-chip>
          </div>
        </v-flex>
      </v-layout>

    </div>
  </v-app>
</div>

나는 이것이 네가 하고자 하는 일이라고 생각해.나는 몇 가지 사소한 변경을 했다 - 나는 부동액 대신 항목 배열로 밀고 있다.새로운 아이템을 상위에 두고 싶다면 배열 순서를 거꾸로 하는 것을 추천한다.watcher를 제거하고 setNewIndex를 위한 새로운 방법을 추가했다.나 또한 인쇄했다.i따라하기 쉽도록 몇 군데 스크린으로.

new Vue({
  el: '#app',
  data() {
    return {
      panel: 0,
      items: [{
        name: "Three"
      }, {
        name: "Two"
      }, {
        name: "One"
      }],
      selectedIndex: 0
    }
  },
  methods: {
    addItem() {
    let added = this.items.length
      this.items.push({
        name: `Infinity ${added}`
      })
      console.log({added});
      this.setNewIndex(added)
    },
    setNewIndex(i){
    this.selectedIndex = i+"_selected";
    }
  },
  watch: {
    
  }
})

table {
  max-width: 80px;
  max-height: 68px;
  font-size: 10px;
  background-color: #ffd23f;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <div>
      <v-layout>
        <v-flex>
          <table border="1">
            <tr>
              <th>Item Index</th>
              <th>Selected index</th>
              <th>Outline</th>
            </tr>
            <tr v-for="(item,i) in items">
              <td class="text-xs-center">{{i}}</td>
              <td class="text-xs-center">{{selectedIndex}}</td>
              <td class="text-xs-center">{{i+'_selected'!=selectedIndex}}</td>
            </tr>
          </table>
        </v-flex>
      </v-layout>
      <v-layout>
        <v-flex md4 xs4>
          <div class="d-flex justify-between align-center mb-3">
            <v-btn icon @click="addItem">
              <v-icon>add</v-icon>
            </v-btn>
          </div>

<pre>{{selectedIndex}}</pre>

          <v-expansion-panel v-model="panel">
            <v-expansion-panel-content v-for="(item,i) in items" :key="item.name" >
              <div slot="header" @click="setNewIndex(i)">Item {{i}} {{item.name}}</div>
              <v-card>
                <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
              </v-card>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-flex>
        <v-flex>
          <v-spacer class="my-4" />
          <div class="text-xs-center" v-for="(item,i) in items" :key="item.name">
            <v-chip :outline="i+'_selected' != selectedIndex" color="secondary">{{i}}{{item.name}}</v-chip>
          </div>
        </v-flex>
      </v-layout>

    </div>
  </v-app>
</div>

참조URL: https://stackoverflow.com/questions/66424472/how-to-fix-issue-with-vuetifys-expansion-panel