时间戳

首页 > 解决方案 > Vuetify 数据表中选定行的计算属性未刷新

vue.js - Vuetify 数据表中选定行的计算属性未刷新

问题描述

当我尝试检测 v-data-table (vuetify) 的选定行中的更改时，我有一个奇怪的行为。

这是一个示例代码：

<template>
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    item-key="name"
    show-select
  >
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        selected: [],
        headers: [
          { text: 'Dessert (100g serving)', value: 'name' },
          { text: 'Calories', value: 'calories' },
        ],
        desserts: [
          { name: 'Frozen Yogurt', calories: 159 },
          { name: 'Ice cream sandwich', calories: 237 },
          { name: 'Eclair', calories: 262 },
        ],
      }
    },
    watch: {
      selected: function(newSelected, oldSelected) {
        console.log("watch", this.selected.length);
      }
    },
    computed: {
      selectedSize() {
        console.log("computed", this.selected.length);
        return this.selected.length;
      }
    },
  }
</script>

当我在表格中选择一行时，控制台会显示：

watch 1

但没有显示“计算 1”。为什么不打印计算的属性？

标签： vue.jsvuetify.js

解决方案

推荐阅读