У меня есть список сведений о пользователе внутри прокрутки, у каждого из которых есть кнопка. Это выглядит примерно так:
Пользователь 1
Пользователь 2
Пользователь 3
Список отображается с использованием v-for. При нажатии кнопки в каждом из div я хотел бы извлечь некоторую информацию, например номер пользователя. Как я могу подойти к этому вопросу?
Вот пример с Vuejs3, но вы должны узнать больше:
<template>
<ul>
<li v-for = "user in users"
:key = "user.id"
@click = "showDetail(user)"
>
{{ user.id }} - {{ user.name }}
</li>
</ul>
<div v-if = "clickedUser">
<h6>Detail</h6>
<span>{{ clickedUser.id }}</span>
<span>{{ clickedUser.name }}</span>
</div>
<script>
import {ref} from "vue";
export default {
setup() {
const users = [
{id: 1, name: "A"},
{id: 2, name: "B"},
{id: 3, name: "C"},
{id: 4, name: "D"},
];
let clickedUser = ref(null);
const showDetail = (user) => {
clickedUser.value = user;
};
return {users, clickedUser, showDetail};
},
};
Используя vue native, вы можете просто сделать это так
<view v-for = "user in users" :key = "user.id">
<button :on-press = "()=> getDetail(user.number)" />
</view>
Затем в вашем сценарии
<scripts>
...
methods: {
getDetail(id){
this.number = id // assuming you already have this.number set in your data object
console.info(id)
}
}
<scripts />