当前位置： 文江博客话题详情

Vuetify：如何更新项目值时如何使V-DATA桌面行闪烁

发布于 2025-02-10 13:31:54 字数 3553 浏览 1 评论 0原文

我想创建一个表格，当项目更新时，行闪烁一次。

当组件启动时，我设法使行眨眼，但是当值更新时，它不会闪烁。

我创建了一个用两个CSS类（仅用于测试）的示例，一个眨眼一次，眨眼一次。

如果我们更新项目值，我们可以看到无限的情况仍然闪烁并在填补条件时更改行，但是应该闪烁一次的项目没有改变。

任何帮助将不胜感激。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id: 3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id: 4,
          name: 'Cupcake',
          calories: 305,
        },
      ],
      headers: [{
          text: 'Dessert',
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories'
        },
      ],
    };
  },
  methods: {
    blink(item) {
      if (item.calories > 200){
        return 'blink-great';
      } else {
        return 'blink-less';
      }
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    },
    updateValues() {
      const newValues = this.items.map((el) => { 
        return {...el, calories: this.getRandomInt(100,500)}; 
      })
      this.items = newValues
    } 
  },
  computed: {
    displayItems() {
      var newItems = this.items.map((el) => { 
        return {...el, calories: el.calories * 1}; 
      })
      return newItems
    }
  },
});
.blink-less {
  animation: blinking ease-out 1s 3;
  --background-color: #FF0000
}

.blink-great {
  animation: blinking ease-out 1s infinite;
  --background-color: #0000FF
}

@keyframes blinking {
  0% {
    background-color: var(--background-color);
  }
  100% {
    background-color: #fff;
  }
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-btn 
          @click="updateValues()"
        > Update value </v-btn>
      </v-row>
      <v-row class="px-5">
        <v-data-table 
         hide-default-footer 
         :headers="headers" 
         :items="displayItems" 
         :item-class="blink"
       />
      </v-row>
    </v-container>
  </v-app>
</div>

原文

I would like to create a table that when items is updated, the row blink once.

i managed to make a row blink when the component starts, but it does not blink when value is updated.

i created an example with two css class (only for test), one that blinks once and another that blinks infinite.

if we update items values, we can see that the infinite still blinks and change rows as the condition is filled, but the items that should blink once, didn't change.

any help will be appreciated.

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id: 3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id: 4,
          name: 'Cupcake',
          calories: 305,
        },
      ],
      headers: [{
          text: 'Dessert',
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories'
        },
      ],
    };
  },
  methods: {
    blink(item) {
      if (item.calories > 200){
        return 'blink-great';
      } else {
        return 'blink-less';
      }
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    },
    updateValues() {
      const newValues = this.items.map((el) => { 
        return {...el, calories: this.getRandomInt(100,500)}; 
      })
      this.items = newValues
    } 
  },
  computed: {
    displayItems() {
      var newItems = this.items.map((el) => { 
        return {...el, calories: el.calories * 1}; 
      })
      return newItems
    }
  },
});
.blink-less {
  animation: blinking ease-out 1s 3;
  --background-color: #FF0000
}

.blink-great {
  animation: blinking ease-out 1s infinite;
  --background-color: #0000FF
}

@keyframes blinking {
  0% {
    background-color: var(--background-color);
  }
  100% {
    background-color: #fff;
  }
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-btn 
          @click="updateValues()"
        > Update value </v-btn>
      </v-row>
      <v-row class="px-5">
        <v-data-table 
         hide-default-footer 
         :headers="headers" 
         :items="displayItems" 
         :item-class="blink"
       />
      </v-row>
    </v-container>
  </v-app>
</div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

十年九夏 2025-02-17 13:31:54

我创建了一个标志并添加了新的CSS类。它有效，但代码差。如果我找到一个更好，干净的解决方案，我会在这里发布

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      controlAnimation: false,
      items: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id: 3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id: 4,
          name: 'Cupcake',
          calories: 305,
        },
      ],
      headers: [{
          text: 'Dessert',
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories'
        },
      ],
    };
  },
  
  methods: {
    blink(item) {
      if (this.controlAnimation) {
        let itemClassTrue = 'blink-even-true'
        /* check item.value, based on condition...
        itemClassTrue = 'blink-less-true'
        itemClassTrue = 'blink-even-true'
        itemClassTrue = 'blink-great-true'
        */
        return itemClassTrue;
      } else {
        let itemClassFalse = 'blink-great-false'
        /* check  item.value, based on condition...
        itemClassTrue = 'blink-less-false'
        itemClassTrue = 'blink-even-false'
        itemClassTrue = 'blink-great-false'
        */
        return itemClassFalse;
      }
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    },
    updateValues() {
      const newValues = this.items.map((el) => { 
        return {...el, calories: this.getRandomInt(100,500)}; 
      })
      this.items = newValues
    } 
  },
  computed: {
    displayItems() {
      this.controlAnimation = !this.controlAnimation
      var newItems = this.items.map((el) => { 
        return {...el, calories: el.calories * 1}; 
      })
      return newItems
    }
  },
});
.blink-less-true {
  animation: blinking-less-true 1s 2 !important;
  --background-color: rgb(196, 76, 76) !important;
}

.blink-even-true {
  animation: blinking-even-true 1s 2 !important;
  --background-color: #fa0 !important;
}

.blink-great-true {
  animation: blinking-great-true 1s 2 !important;
  --background-color: rgb(3, 163, 70) !important;
}

.blink-less-false {
  animation: blinking-less-false 1s 2 !important;
  --background-color: rgb(196, 76, 76) !important;
}

.blink-even-false {
  animation: blinking-even-false 1s 2 !important;
  --background-color: #fa0 !important;
}

.blink-great-false {
  animation: blinking-great-false 1s 2 !important;
  --background-color: rgb(3, 163, 70) !important;
}

@keyframes blinking-less-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-even-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-great-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-less-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-even-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}
@keyframes blinking-less-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-btn 
          @click="updateValues()"
        > Update value </v-btn>
      </v-row>
      <v-row class="px-5">
        <v-data-table 
         hide-default-footer 
         :headers="headers" 
         :items="displayItems" 
         :item-class="blink"
       />
      </v-row>
    </v-container>
  </v-app>
</div>

I created a flag and added new css classes.. it works but has poor code. If i found a better and clean solution i post it here

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      controlAnimation: false,
      items: [{
          id: 1,
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          id: 2,
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          id: 3,
          name: 'Eclair',
          calories: 262,
        },
        {
          id: 4,
          name: 'Cupcake',
          calories: 305,
        },
      ],
      headers: [{
          text: 'Dessert',
          value: 'name',
        },
        {
          text: 'Calories',
          value: 'calories'
        },
      ],
    };
  },
  
  methods: {
    blink(item) {
      if (this.controlAnimation) {
        let itemClassTrue = 'blink-even-true'
        /* check item.value, based on condition...
        itemClassTrue = 'blink-less-true'
        itemClassTrue = 'blink-even-true'
        itemClassTrue = 'blink-great-true'
        */
        return itemClassTrue;
      } else {
        let itemClassFalse = 'blink-great-false'
        /* check  item.value, based on condition...
        itemClassTrue = 'blink-less-false'
        itemClassTrue = 'blink-even-false'
        itemClassTrue = 'blink-great-false'
        */
        return itemClassFalse;
      }
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    },
    updateValues() {
      const newValues = this.items.map((el) => { 
        return {...el, calories: this.getRandomInt(100,500)}; 
      })
      this.items = newValues
    } 
  },
  computed: {
    displayItems() {
      this.controlAnimation = !this.controlAnimation
      var newItems = this.items.map((el) => { 
        return {...el, calories: el.calories * 1}; 
      })
      return newItems
    }
  },
});
.blink-less-true {
  animation: blinking-less-true 1s 2 !important;
  --background-color: rgb(196, 76, 76) !important;
}

.blink-even-true {
  animation: blinking-even-true 1s 2 !important;
  --background-color: #fa0 !important;
}

.blink-great-true {
  animation: blinking-great-true 1s 2 !important;
  --background-color: rgb(3, 163, 70) !important;
}

.blink-less-false {
  animation: blinking-less-false 1s 2 !important;
  --background-color: rgb(196, 76, 76) !important;
}

.blink-even-false {
  animation: blinking-even-false 1s 2 !important;
  --background-color: #fa0 !important;
}

.blink-great-false {
  animation: blinking-great-false 1s 2 !important;
  --background-color: rgb(3, 163, 70) !important;
}

@keyframes blinking-less-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-even-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-great-false {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-less-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}

@keyframes blinking-even-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}
@keyframes blinking-less-true {
  0% { background-color: var(--background-color); }
  100% { background-color: #fff; }
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      <v-row class="pa-5">
        <v-btn 
          @click="updateValues()"
        > Update value </v-btn>
      </v-row>
      <v-row class="px-5">
        <v-data-table 
         hide-default-footer 
         :headers="headers" 
         :items="displayItems" 
         :item-class="blink"
       />
      </v-row>
    </v-container>
  </v-app>
</div>

回复 原文
七月上 2025-02-17 13:31:54

Item-class您并不遥不可及。它可以采用一个字符串，该字符串告诉它在项目对象上寻找道具。因此，在更新数据时，您只需将眨眼类添加到您即时创建的道具。

在这种情况下，我将命名prop dynamicClass

类似的东西：
模板：

   <v-data-table 
     hide-default-footer 
     :headers="headers" 
     :items="items" 
     :item-class="dynamicClass"
   />

脚本：

  methods: {
    updateRandom() {
     const randomIdx = this.generateRandomNumber(0, this.items.length - 1);
     const randomNumber = this.generateRandomNumber(1, 1200);

     let item = { ...this.items[randomIdx] };
     item.calories = randomNumber;
     item.dynamicClass = "blink-less";

     this.$set(this.items, randomIdx, item);

     setTimeout(() => {
       delete item.dynamicClass;
       this.$set(this.items, randomIdx, item);
     }, 2000);
   },
   generateRandomNumber(min, max) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   },
 },

这里的想法是我们正在添加＆amp;从数组中的项目/对象中删除类。使用this。$ set（）保证反应性。但是您也可以使用array.splice（），但是无论哪种方式，您都希望在该索引上替换数据对象以保持反应性。

这是 codesandbox

You're not far off with item-class. It can take a string, which tells it to look for a prop on the item's object. With this, as you're updating the data, you can just add/remove the blink class to a prop you create on the fly.

In this case, I'm just going to name the prop dynamicClass

something like this:
template:

   <v-data-table 
     hide-default-footer 
     :headers="headers" 
     :items="items" 
     :item-class="dynamicClass"
   />

script:

  methods: {
    updateRandom() {
     const randomIdx = this.generateRandomNumber(0, this.items.length - 1);
     const randomNumber = this.generateRandomNumber(1, 1200);

     let item = { ...this.items[randomIdx] };
     item.calories = randomNumber;
     item.dynamicClass = "blink-less";

     this.$set(this.items, randomIdx, item);

     setTimeout(() => {
       delete item.dynamicClass;
       this.$set(this.items, randomIdx, item);
     }, 2000);
   },
   generateRandomNumber(min, max) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   },
 },

The idea here is that we are adding & removing the class from the item/object in the array. doing it with this.$set() guarantees reactivity. But you could also use Array.splice() but either way, you want to replace the data object at that index to maintain reactivity.

Here is a working example in a codesandbox

回复 原文
~没有更多了~

关于作者

只等公子

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文