步骤
为组件FriendContact.vue添加Delete Contact按钮
1、html中添加按钮并添加emit方法
<button @click="deleteContact">Delete Contact</button>
emits: ['toggle-favorite','delete-contact'], //让自己或者他人可以清楚知道组件中有哪些事件被触发
deleteContact() {
this.$emit('delete-contact', this.id);
}
2、App.vue中添加delete-contact监听和delete方法
<ul>
<friend-contact v-for="friend in friends" :key="friend.id" :id="friend.id" :name="friend.name"
:phone-number="friend.phone" :email-address="friend.email" :is-favorite="friend.isFavorite"
@toggle-favorite="toggleFavoriteStatus(friend.id)" @delete-contact="deleteContact"></friend-contact>
</ul>
deleteContact(friendId) {
// const identifiedFriend = this.friends.find(friend => friend.id === friendId);
// if (!identifiedFriend) return alert('No such friend exists!')
// this.friends.splice(this.friends.indexOf(identifiedFriend), 1)
this.friends = this.friends.filter(friend => friend.id !== friendId);
}
完整代码
FriendContact.vue
<template>
<li>
<h2>{{ name }}{{ isFavorite ? ' (Favorite)' : '' }}</h2>
<button @click="toggleFavorite">Toggle Favorite</button>
<button @click="toggleDetails">{{ detailsVisiable ? 'Hide' : 'Show' }} Details</button>
<ul v-if="detailsVisiable">
<li><strong>Phone:</strong>{{ phoneNumber }}</li>
<li><strong>Email:</strong>{{ emailAddress }}</li>
</ul>
<button @click="deleteContact">Delete Contact</button>
</li>
</template>
<script>
export default {
// props: [
// 'name',
// 'phoneNumber',
// 'emailAddress',
// 'isFavorite'
// ],
//add validation to props
props: {
id: {
//type: Number,
required: true
},
name: {
type: String,
required: true,
},
phoneNumber: {
type: String,
required: true
},
emailAddress: {
type: String,
required: true
},
isFavorite: {
type: Boolean,
required: false,
default: false,
// validator: function (value) {
// return value === '0' || value === '1';
// }
}
},
emits: ['toggle-favorite','delete-contact'], //让自己或者他人可以清楚知道组件中有哪些事件被触发
// emits: {
// 'toggle-favorite': function (id) {
// if (id) {
// return true;
// } else {
// console.log('id is required');
// return false;
// }
// }
// },
data() {
return {
detailsVisiable: false,
friend: {
name: "John Doe",
phone: "123-456-7890",
email: "john@example.com",
},
};
},
methods: {
toggleDetails() {
this.detailsVisiable = !this.detailsVisiable;
},
//属性无法改变App.vue中传过来的值再返回去,所以无法直接使用isFavorite
//所以需要重新定义一个变量,在toggleFavorite中改变这个值
toggleFavorite() {
//this.friendIsFavorite = !this.friendIsFavorite;
this.$emit('toggle-favorite', this.id);
},
deleteContact() {
this.$emit('delete-contact', this.id);
}
}
};
</script>
App.vue
<template>
<section>
<header>
<h1>My Friends</h1>
</header>
<new-friend @add-contact="addContact"></new-friend> <!--使用组件-->
<ul>
<friend-contact v-for="friend in friends" :key="friend.id" :id="friend.id" :name="friend.name"
:phone-number="friend.phone" :email-address="friend.email" :is-favorite="friend.isFavorite"
@toggle-favorite="toggleFavoriteStatus(friend.id)" @delete-contact="deleteContact"></friend-contact>
</ul>
</section>
</template>
<script>
// const app = {
export default {
data() {
return {
friends: [
{ id: 1, name: 'John', phone: '1234567890', email: 'john@gmail.com', isFavorite: true },
{ id: 2, name: 'Jane', phone: '0987654321', email: 'jane@gmail.com', isFavorite: false },
//{ id: 3, name: 'Bob', phone: '1245678901', email: 'bob@gmail.com', isFavorite: true },
// { id: 4, name: 'Alice', phone: '0123456789', email: 'alice@gmail.com', isFavorite: true },
// { id: 5, name: 'Jack', phone: '1029384756', email: 'jack@gmail.com', isFavorite: false },
// { id: 6, name: 'Jill', phone: '1234567890', email: 'jill@gmail.com', isFavorite: true }
]
}
},
methods: {
toggleFavoriteStatus(friendId) {
// const identifiedFriend = this.friends.find(friend => friend.id === friendId);
// identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
this.friends.find(friend => friend.id === friendId).isFavorite =
!this.friends.find(friend => friend.id === friendId).isFavorite
},
添加方法addContact用于增加联系人
// addContact(name, phone, email) {
// const newFriend = { id: this.friends.length + 1, name: name, phone: phone, email: email, isFavorite: false };
// this.friends.push(newFriend);
// }
addContact(friendObj) {
const newFriend = {id: this.friends.length + 1, ...friendObj};
this.friends.push(newFriend)
},
deleteContact(friendId) {
// const identifiedFriend = this.friends.find(friend => friend.id === friendId);
// if (!identifiedFriend) return alert('No such friend exists!')
// this.friends.splice(this.friends.indexOf(identifiedFriend), 1)
this.friends = this.friends.filter(friend => friend.id !== friendId);
}
}
}
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-family: "Jost", sans-serif;
}
body {
margin: 0;
}
header {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 3rem auto;
border-radius: 10px;
padding: 1rem;
background-color: #58004d;
color: white;
text-align: center;
width: 90%;
max-width: 40rem;
}
#app ul {
margin: 0;
padding: 0;
list-style: none;
}
/*为NewFriend-form添加style*/
#app li,
#app form {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 1rem auto;
border-radius: 10px;
padding: 1rem;
text-align: center;
width: 90%;
max-width: 40rem;
}
#app h2 {
font-size: 2rem;
border-bottom: 4px solid #ccc;
color: #58004d;
margin: 0 0 1rem 0;
}
#app button {
font: inherit;
cursor: pointer;
border: 1px solid #ff0077;
background-color: #ff0077;
color: white;
padding: 0.05rem 1rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
#app button:hover,
#app button:active {
background-color: #ec3169;
border-color: #ec3169;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}
/*NewFriend-newstyle*/
#app input {
font: inherit;
padding: 0.2rem 0.4rem;
}
#app label {
font-weight: bold;
margin-right: 1rem;
width: 7rem;
display: inline-block;
}
#app form div {
margin: 1rem 0;
}
</style>