W html:

<div @mouseenter='setDisplay(0)' @mouseleave='setHide(0)'
  <div
    class="innerHolder"
    v-show='innerDisplay[0]'
    >
    aaa
  </div>
</div>

Chcę użyć v-show i tablicy do kontrolowania, czy pokazy div. A w danych:

innerDisplay: [false,flase,false]

Następnie w metodach:

setDisplay(index){
  this.innerDisplay[index] = true;
},
setHide(index){
  this.innerDisplayArray[index] = false;
},

Dziwne, działa, ale bardzo wolno. To „wolno” oznacza, że ​​gdy moja mysz wejdzie w nadrzędny div przez około 5 sekund, pokaże się div podrzędny. Ale jeśli użyję tego:

v-show:'innerDisplay'

A w danych używam:

innerDisplay: false;

A zdarzenie mouseenter po prostu zmienia wartość logiczną bardziej niż tablicę logiczną, element potomny pojawi się w momencie, gdy mysz się poruszy w ciągu zaledwie sekundy

Czy tablica spowalnia metody?

0
innocentDrifter 15 listopad 2018, 17:24

1 odpowiedź

Najlepsza odpowiedź

Problem polega na wykrywaniu zmian.

Ze względu na ograniczenia JavaScript Vue nie może wykryć następujących zmian w tablicy:

  1. Po bezpośrednio ustawić przedmiot z indeksem, np. vm.items [indexofitem] = NewValue

Musisz użyć $set:

new Vue({
  el: '#app',
  data: {
    innerDisplay: [false, false, false]
  },
  methods: {
    setDisplay(index) {
      this.$set(this.innerDisplay, index, true);
    },
    setHide(index) {
      this.$set(this.innerDisplay, index, false);
    }
  }
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div @mouseenter='setDisplay(0)' @mouseleave='setHide(0)'>
    <h1>Before</h1>
    <div class="innerHolder" v-show='innerDisplay[0]'>
      aaa
    </div>
    <h1>After</h1>
  </div>
</div>
2
Roy J 15 listopad 2018, 18:16