Vue v-cho các thành phần
Các thành phần có thể được tái sử dụng với v-for để tạo ra nhiều phần tử cùng loại.
Khi tạo các phần tử bằng v-for từ một thành phần, cũng rất hữu ích khi các props có thể được gán động dựa trên các giá trị từ một mảng.
Tạo các thành phần thành phần với v-for
Bây giờ chúng ta sẽ tạo các phần tử thành phần với v-for dựa trên một mảng có tên mặt hàng thực phẩm.
Ví dụ
App.vue :
<template>
<h1>Food</h1>
<p>Components created with v-for based on an array.</p>
<div id="wrapper">
<food-item
v-for="x in foods"
v-bind:food-name="x"/>
</div>
</template>
<script>
export default {
data() {
return {
foods: ['Apples','Pizza','Rice','Fish','Cake']
};
}
}
</script> FoodItem.vue :
<template>
<div>
<h2>{{ foodName }}</h2>
</div>
</template>
<script>
export default {
props: ['foodName']
}
</script> Chạy ví dụ »v-bind Viết tắt
Để liên kết các đạo cụ một cách linh hoạt, chúng tôi sử dụng v-bind và vì bây giờ chúng tôi sẽ sử dụng v-bind nhiều hơn trước nên chúng tôi sẽ sử dụng v-bind: tốc ký : trong phần còn lại của hướng dẫn này.
Thuộc tính 'chìa khóa'
Nếu chúng ta sửa đổi mảng sau khi các phần tử được tạo bằng v-for , lỗi có thể xuất hiện do cách Vue cập nhật các phần tử đó được tạo bằng v-for . Vue tái sử dụng các phần tử để tối ưu hóa hiệu suất, vì vậy nếu chúng tôi xóa một mục, các phần tử hiện có sẽ được sử dụng lại thay vì tạo lại tất cả các phần tử và các thuộc tính của phần tử có thể không còn chính xác nữa.
Lý do khiến các phần tử được sử dụng lại không chính xác là do các phần tử không có mã định danh duy nhất và đó chính xác là lý do chúng tôi sử dụng thuộc tính key để: để Vue phân biệt các phần tử.
Chúng ta sẽ tạo ra hành vi bị lỗi nếu không có thuộc tính key , nhưng trước tiên hãy xây dựng một trang web có các loại thực phẩm sử dụng v-for để hiển thị: tên món ăn, mô tả, hình ảnh cho món ăn yêu thích và nút để thay đổi trạng thái yêu thích.
Ví dụ
App.vue :
<template>
<h1>Food</h1>
<p>Food items are generated with v-for from the 'foods' array.</p>
<div id="wrapper">
<food-item
v-for="x in foods"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"/>
</div>
</template>
<script>
export default {
data() {
return {
foods: [
{ name: 'Apples',
desc: 'Apples are a type of fruit that grow on trees.',
favorite: true },
{ name: 'Pizza',
desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.',
favorite: false },
{ name: 'Rice',
desc: 'Rice is a type of grain that people like to eat.',
favorite: false }
{ name: 'Fish',
desc: 'Fish is an animal that lives in water.',
favorite: true }
{ name: 'Cake',
desc: 'Cake is something sweet that tastes good.',
favorite: false }
]
};
}
}
</script>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
}
#wrapper > div {
border: dashed black 1px;
flex-basis: 120px;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style> FoodItem.vue :
<template>
<div>
<h2>
{{ foodName }}
<img src="/img_quality.svg" v-show="foodIsFavorite">
</h2>
<p>{{ foodDesc }}</p>
<button v-on:click="toggleFavorite">Favorite</button>
</div>
</template>
<script>
export default {
props: ['foodName','foodDesc','isFavorite'],
data() {
return {
foodIsFavorite: this.isFavorite
}
},
methods: {
toggleFavorite() {
this.foodIsFavorite = !this.foodIsFavorite;
}
}
}
</script>
<style>
img {
height: 1.5em;
float: right;
}
</style> Chạy ví dụ » Để thấy rằng chúng ta cần thuộc tính key , hãy tạo một nút để loại bỏ phần tử thứ hai trong mảng. Khi điều này xảy ra, nếu không có thuộc tính key , hình ảnh yêu thích sẽ được chuyển từ phần tử 'Cá' sang phần tử 'Bánh' và điều đó KHÔNG đúng:
Ví dụ
Sự khác biệt duy nhất so với ví dụ trước là chúng ta thêm một nút:
<button @click="removeItem">Remove Item</button>và một phương pháp:
methods: {
removeItem() {
this.foods.splice(1,1);
}
} trong App.vue .
Như đã đề cập trước đó: lỗi này, hình ảnh yêu thích thay đổi từ 'cá' thành 'bánh' khi một phần tử bị xóa, liên quan đến việc Vue tối ưu hóa trang bằng cách sử dụng lại các phần tử, đồng thời Vue không thể phân biệt hoàn toàn các phần tử . Đó là lý do tại sao chúng ta phải luôn bao gồm thuộc tính key để đánh dấu duy nhất từng phần tử khi tạo phần tử bằng v-for . Khi chúng tôi sử dụng thuộc tính key , chúng tôi không còn gặp phải vấn đề này nữa.
Chúng tôi không sử dụng chỉ mục phần tử mảng làm giá trị thuộc tính key vì điều đó thay đổi khi các phần tử mảng được xóa và thêm vào. Chúng ta có thể tạo một thuộc tính dữ liệu mới để giữ một giá trị duy nhất cho từng mặt hàng, chẳng hạn như số ID, nhưng vì các mặt hàng thực phẩm đã có tên duy nhất nên chúng ta chỉ có thể sử dụng giá trị đó:
Ví dụ
Chúng ta chỉ cần thêm một dòng trong App.vue để xác định duy nhất từng thành phần được tạo bằng v-for và khắc phục sự cố:
<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
/>
Chạy ví dụ »