[英]Button that adds a new row when clicked in Vue 3
First I must say that I'm a complete newbie in coding and Vue it's the first framework I'm learning and I'm terrible working with arrays at the moment.首先,我必须说我是编码方面的新手,而 Vue 是我正在学习的第一个框架,目前我很难使用 arrays。 In the practice I am doing I am displaying the first five elements of the array in a table (I've filtered them in a new variable to do the v-for).
在我正在做的实践中,我在表格中显示数组的前五个元素(我已将它们过滤到一个新变量中以执行 v-for)。
Now I need to add a button that when clicked will show me a new row of the original array, but I'm a bit stuck on how to do it.现在我需要添加一个按钮,单击该按钮将显示原始数组的新行,但我有点不知道该怎么做。 As u may see in the code below, contactList is the variable that has all the data, but I have no clue how to link it to the filtered one to show more data when clicked.
正如您在下面的代码中看到的那样,contactList 是包含所有数据的变量,但我不知道如何将其链接到过滤后的变量以在单击时显示更多数据。
<template>
<h1 class="display-1 text-primary">Contacts</h1>
<button type="button" class="btn btn-outline-primary btn-lg" @click="addRandom">Add random</button>
<div class="container container__pos">
<table class="table table-hover">
<thead>
<tr>
<th class="col col__style">Picture</th>
<th class="col col__style">Name</th>
<th class="col col__style">Popularity</th>
<th class="col col__style">Won an Oscar</th>
<th class="col col__style">Won an Emmy</th>
</tr>
</thead>
<tbody>
<tr v-for="(element, index) of contactListed" :key="index">
<td scope="row">
<img
:src="element.pictureUrl"
:alt="element.name + ` image`"
class="image"
/>
</td>
<td> {{ element.name }}</td>
<td>{{ element.popularity }}</td>
<td>{{ wonAward(element.wonOscar) }}</td>
<td>{{ wonAward(element.wonEmmy) }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import contacts from "./contacts.json";
export default {
data() {
return {
contactList: contacts,
contactListed: contacts.slice(0, 5),
};
},
methods: {
wonAward(element) {
if (element === true || element === true){
return "winner";
} else {
return "";
}
},
},
};
</script>
You can use a computed variable that holds the first N elements of the array, and have your button increment the value of N, like this:您可以使用一个计算变量来保存数组的前 N 个元素,并让您的按钮增加 N 的值,如下所示:
<script> import contacts from "./contacts.json"; export default { data() { return { contactList: contacts, nItems: 5 }; }, computed: { contactListed() { return this.contacts.slice(0, this.nItems) } }, methods: { addRow() { this.nItems++; }, wonAward(element) { if (element === true || element === true){ return "winner"; } else { return ""; } }, }, }; </script> <template>... <button @click="addRow()" /> </template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.