如何在 Vue Native 中按下按钮时从 div 检索文本？

Question

我在滚动视图中有一个用户详细信息列表，每个用户详细信息都有一个按钮。它看起来像下面这样：用户1用户2用户3该列表使用 v-for 呈现。在每个 div 中按下按钮时，我想提取一些信息，例如用户编号。我该如何处理这个问题？

Answer 1

这是 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};

    },

};

Answer 2

使用 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.log(id)

}

}

<scripts />