Как получить текст из div при нажатии кнопки в Vue Native?

У меня есть список сведений о пользователе внутри прокрутки, у каждого из которых есть кнопка. Это выглядит примерно так:

  1. Пользователь 1

  2. Пользователь 2

  3. Пользователь 3

Список отображается с использованием v-for. При нажатии кнопки в каждом из div я хотел бы извлечь некоторую информацию, например номер пользователя. Как я могу подойти к этому вопросу?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
132
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот пример с 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 />

Другие вопросы по теме