Удалить объект с функцией внутри него

Question

Я боролся с этим уже несколько часов и не могу этого сделать. Я использую Vue (JS).

Итак, я пытаюсь вставить несколько уведомлений в объект, а затем отобразить их пользователю. Каждое уведомление имеет свою собственную функцию для отображения вещей при нажатии, а затем для удаления себя после. Последнее я не могу понять.

Я в основном использую в своих интересах реактивные свойства Вю.

Я уже много искал, пытаясь найти способ удалить объект с его собственной функцией, но пока ничего не нашел.

Причина, по которой я не использую @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

Вы можете сделать это как , что .

Когда вы используете v-for и манипулируете отображаемым массивом, лучше добавить :key (идентификатор может генерироваться автоматически). Это помогает 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

Вы можете удалить объект из массива уведомлений, используя обычные методы мутации массива :

массив

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

удалить объект из массива

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