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

我在滚动视图中有一个用户详细信息列表,每个用户详细信息都有一个按钮。它看起来像下面这样:

  1. 用户1

  2. 用户2

  3. 用户3

该列表使用 v-for 呈现。在每个 div 中按下按钮时,我想提取一些信息,例如用户编号。我该如何处理这个问题?


月关宝盒
浏览 47回答 2
2回答

holdtom

这是 Vuejs3 的示例,但您应该了解更多信息:<template><ul>&nbsp; &nbsp; <li v-for="user in users"&nbsp; &nbsp; &nbsp; &nbsp; :key="user.id"&nbsp; &nbsp; &nbsp; &nbsp; @click="showDetail(user)"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {{ user.id }} - {{ user.name }}&nbsp; &nbsp; </li></ul><div v-if="clickedUser">&nbsp; &nbsp; <h6>Detail</h6>&nbsp; <span>{{ clickedUser.id }}</span>&nbsp; &nbsp; <span>{{ clickedUser.name }}</span></div><script>import {ref} from "vue";export default {&nbsp; &nbsp; setup() {&nbsp; &nbsp; &nbsp; &nbsp; const users = [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 1, name: "A"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 2, name: "B"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 3, name: "C"},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {id: 4, name: "D"},&nbsp; &nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; &nbsp; let clickedUser = ref(null);&nbsp; &nbsp; &nbsp; &nbsp; const showDetail = (user) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clickedUser.value = user;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; return {users, clickedUser, showDetail};&nbsp; &nbsp; },};

繁花如伊

使用 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 objectconsole.log(id)}}<scripts />
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript