Question

我已经为此奋斗了几个小时，但似乎无法完成。我正在使用Vue（JS）。

因此，我想做的是在对象内推送一些通知，然后将其显示给用户。每个通知都有其自己的功能，即在单击时显示事物，然后在其后删除自身。后者我不太清楚。

我基本上是在利用Vue的反应特性。

我已经进行了很多搜索，试图找到一种删除具有其自身功能的对象的方法，但是到目前为止，我什么都没找到。

我之所以不使用@click来删除其对象，是因为我想控制通知内的操作是否已完成，然后才删除它。

我在这里做了一个简化的JSFiddle：https://jsfiddle.net/eywraw8t/319133/

new Vue({
  el: "#app",
  data: {
    notifications: [
      { 
      text: "Some notification", 
      action: function() {
      		alert("Something 1");
          // And then delete this object entirely, so that this notification's gone
        }
      },
      { 
      text: "Another notification", 
      action: function() {
      		alert("Something 2");
          // Same as above
        }
      }
    ]
  }
})

.notification {
  background-color: #bbb;
  margin: 5px;
  cursor: pointer;
  padding: 15px;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0,0,0,.2);
  
  width: 200px;
  transition: .1s ease;
}

.notification:hover {
  background-color: #ccc;
}

body {
  font-family: 'Roboto';
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  (Click on one)
  
  <div class="notification" v-for="notif in notifications" @click="notif.action">{{ notif.text }}</div>
  
</div>

任何帮助将不胜感激。预先感谢。

Answer 1

您可以像that一样进行操作。

使用v-for并操纵显示的数组时，最好添加:key（ID可以自动生成）。它有助于Vue正确显示项目。

new Vue({
  el: "#app",
  data: {
    notifications: [
      { 
      id: 0,
      text: "Some notification", 
      action: function() {
      	  return confirm("Something 1");
          // And then delete this object entirely, so that this notification's gone
        }
      },
      { 
      id: 1,
      text: "Another notification", 
      action: function() {
          return confirm("Something 2");
          // Same as above
        }
      }
    ]
  },
  methods: {
  	processNotif(index) {
       const notif = this.notifications[index];
       const result = notif.action();
       if (result) this.notifications.splice(index, 1);
    },
  }
})

.notification {
  background-color: #bbb;
  margin: 5px;
  cursor: pointer;
  padding: 15px;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0,0,0,.2);
  
  width: 200px;
  transition: .1s ease;
}

.notification:hover {
  background-color: #ccc;
}

body {
  font-family: 'Roboto';
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  (Click on one)
  
  <div :key="notif.id" class="notification" v-for="(notif, index) in notifications" @click="processNotif(index)">{{ notif.text }}</div>
  
</div>

Answer 2

您可以使用normal array mutation methods从通知数组中删除对象：

数组

notifications: [
      { 
      text: "Some notification", 
      action: function() {
            //
        }
      },{ 
      text: "Some notification", 
      action: function() {
            //
        }
      }
]

从数组中删除对象

let index = 1
notifications = notifications.slice(index)

删除内部包含功能的对象

2 个答案: