1. How can I remove a link using the method from a Vue.js component? Please help me troubleshoot this error: 'method splice is undefined' is showing up in console. Adding a link when inserting a message is not an issue, but removing it seems impossible. Pushing arrays in my single page works fine, but providing a way for the user to remove them is proving challenging.
<div class="list-group">
<div class="col-lg-4" style="margin-top:3px">
<input type="text" v-model="link.title" class="form-control" placeholder="title" id="title">
</div>
<div class="col-lg-7">
<input type="text" v-model="link.hyperlink" class="form-control" placeholder="link" id="link">
</div>
<div class="col-lg-1">
<button @click="addLink" type="button" id="add-link-btn" class="btn btn-primary pull-right">+</button>
</div>
</div>
<div v-for="link in message.links" :key="link.id">
<div class="row">
<div class="col-lg-6">
<p>{{link.title}}</p>
</div>
<div class="col-lg-6">
<a>{{link.hyperlink}}</a>
<button class="btn btn-xs btn-danger" @click="removeLink(link)">Delete</button>
</div>
</div>
</div>
<script>
data() {
return {
title: "Add",
link: {
id: 1,
author: "Amedeo",
title: "",
hyperlink: ""
}
};
},
methods: {
addMessage() {
var id = this.messages.length ? this.messages[this.messages.length - 1].id : 0;
var message = Object.assign({}, this.message);
message.id = id + 1;
message.date = new Date();
this.messages.push(message);
this.message.title = "";
this.message.subtitle = "";
this.message.body = "";
},
addLink() {
var messageId = this.messages.length ? this.messages[this.messages.length - 1].id : 1;
var id = this.message.links.length ? this.message.links[this.message.links.length - 1].id : parseInt(messageId + "0", 10);
var link = Object.assign({}, this.link);
link.id = id + 1;
link.date = new Date();
this.message.links.push(link);
this.link.title = "";
this.link.hyperlink = "";
},
removeLink(link) {
this.links.splice(this.links.indexOf(link), 1);
}
}