Question

我正在尝试创建通知，当单击通知并链接到他的路径时，通知会缩短通知的长度。

<li class="header">You have {{ notificationsCount()}}  notif</li> <li>
 <ul class="menu">
    <li v-for="(notification, index) in notif" :notification="notification" :key="notification.id">                  

      <a :href="notification.data.path"              
          @click="markAsRead(notification.id)"
          @mouseup.right="markAsRead(notification.id)"
          class="text-aqua">{{ notification.data.message }}
       </a>
      </li>
  </ul>

    methods: {
        notificationsCount() {
            return this.notif.length
        },

        markAsRead(index, id) {
        if (this.notif.length){
                axios.delete(`/notifications/${id}`)
                    .then(() => {
                        this.notif.splice(index, 1);
                        this.notificationsCount();
                    }); 
            }                 
        }
    }

问题是当存在：href链接时，notificationcount不会减少，但是当充满（＃）或：href的：href使用@ click.prevent执行其功能时，notificationcount会减少。该怎么解决？

内部标签我有两个触发器@click和@ mouseup.right，用于在打开新标签页时使用。当我单击右键时，它的工作很好，并且通知减少了，因为通过@ mouseup.right执行，但是通过@click执行时，它不起作用。我必须再次重新加载以减少通知次数

Answer 1

这按预期工作。您可以在计数器离开之前看到它的变化。当您离开页面时，程序将被删除。当您返回该页面时，它将重新启动。如果要保留数据值，则需要使用某种持久存储，例如localStorage或数据库。您有axios，但是在这里的示例中我无法使用它。

跟随另一个页面的链接将卸载当前页面，因此您没有太多机会看到更改的发生。另外，您没有正确找到要拼接的项目。

new Vue({
  el: '#app',
  data: {
    notif: [{
      id: 1,
      data: {
        path: 'http://www.google.com',
        message: 'Go to google'
      }
    }]
  },
  computed: {
    notificationsCount() {
      return this.notif.length;
    }
  },
  methods: {
    markAsRead(item) {
      const index = this.notif.indexOf(item);
      
      this.notif.splice(index, 1);          
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  Count: {{notificationsCount}}
  <ul class="menu">
    <li v-for="(notification, index) in notif" :key="notification.id">

      <a :href="notification.data.path" @click="markAsRead" class="text-aqua">{{ notification.data.message }}
       </a>
    </li>
  </ul>
</div>

Answer 2

您的问题是axios请求尚未完成，并且页面已经重定向到该路径。您可以在axios请求完成后重构重定向功能。

      ...
      <a
        @click="markAsRead(notification)"
        @mouseup.right="markAsRead(notification)"
        class="text-aqua">{{ notification.data.message }}
     </a>
     ...

     markAsRead(index, notification) {
       if (this.notif.length){
            axios.delete(`/notifications/${id}`)
                .then(() => {
                    this.notif.splice(index, 1);
                    this.notificationsCount();
                    window.location = notification.data.path
                }); 
        }                 
     }

您不需要将click和mouseup绑定在一起，选择click或mouseup。

当a：href链接存在时，Vue.js @click不执行功能

2 个答案: