如何在 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 />

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

How to retrieve text from a div on button press in Vue Native?

javascript

react-native

vue.js

vue-native