1

我有一个用户列表，我正在尝试添加一个图标来启用/禁用他们的帐户。所以我在 v-for 循环中呈现用户列表。我使用循环索引索引的数组跟踪每个图标上徽章的可见性。

我遇到了一个奇怪的问题，除非我更新其他一些虚拟变量，否则 Vue 无法识别对数组值的更改。这是一个 Vuetify 问题吗？还是只是 Vue 反应性问题？

我创建了一个 Codepen 来显示我的问题。 https://codepen.io/DedicatedManager/pen/eYmZRQo?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="text-center">
      The two lists are the same differing only by changing a dummy variable in the "mouseover" and "mouseout" function that causes the badge to display/hide.  But the one on the left doesn't show the badge on hover.  The one on the right has the extra dummy variable that somehow forces the rendering to work and thus the badge shows (it shows on both sides because they use the same variable to hold the boolean for the v-model.
      <v-row
        justify="space-between"
      >

        <v-col cols="6" class="mt-12">  
          <div v-for="(listItem,index) in myData" :key="index">
            <v-badge v-model="showCircle1[index]" overlap>
              <template v-slot:badge>
                <span><v-icon>mdi-delete</v-icon></span>
              </template>
              <v-icon large color="grey" @mouseover="showCircle1[index]=true;" @mouseout="showCircle1[index]=false;">mdi-email</v-icon>
            </v-badge>
          </div>
        </v-col>


        <v-col cols="6" class="mt-12">  
          <div v-for="(listItem,index) in myData" :key="index">
            <v-badge v-model="showCircle1[index]" overlap>
              <template v-slot:badge>
                <span><v-icon>mdi-delete</v-icon></span>
              </template>
              <v-icon large color="grey" @mouseover="showCircle1[index]=true; mouseOverVal=true" @mouseout="showCircle1[index]=false; mouseOverVal=false">mdi-email</v-icon>
            </v-badge>
          </div>
        </v-col>
      </v-row>
      mouseOverVal: {{mouseOverVal}}<br>
      showCircle1: {{showCircle1}}<br>
    </v-container>
  </v-app>
</div>

Javascript

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      showCircle1:[false,false,false,false],
      myData:['one','two','three','four'],
      mouseOverVal:false,
    }
  },
})
4

1 回答 1

0

当您设置数组中的项目的值时，Vue 无法检测到更改。

来自https://vuejs.org/v2/guide/list.html#Caveats：

例如：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // is NOT reactive
vm.items.length = 2 // is NOT reactive

[...] 以下两项将完成与 vm.items[indexOfItem] = newValue 相同的操作，但也会触发反应系统中的状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

有关更多详细信息和其他相关方法，请参阅链接。

于 2019-12-10T23:30:31.737 回答