const items__1 = reactive([{ text: "中国", value: "1001" }, { text: "美国", value: "1002" }, { text: "俄罗斯", value: "1003" }])const change1 = ()=>{ console.log(items__1.text); }我想要点击确定后的那个text应该如何操作
时间: 2023-07-05 16:23:29 浏览: 75
analysis of ACE_Task-putq with timeout=0 when queue is full on Linux platform.pdf
首先,你需要在模板中为每个列表项添加一个 `button` 元素,以便用户可以点击它来触发 `change1` 函数。然后,你可以将 `change1` 函数修改为接受一个参数,用来标识哪个列表项被点击了。最后,在 `change1` 函数内部,你可以使用这个参数来访问对应列表项的 `text` 属性。以下是一个参考代码示例:
```html
<template>
<div>
<ul>
<li v-for="item in items__1" :key="item.value">
{{ item.text }}
<button @click="change1(item.value)">确定</button>
</li>
</ul>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const items__1 = reactive([
{ text: "中国", value: "1001" },
{ text: "美国", value: "1002" },
{ text: "俄罗斯", value: "1003" }
]);
const change1 = (value) => {
const item = items__1.find(item => item.value === value);
console.log(item.text);
};
return {
items__1,
change1
};
}
};
</script>
```
在上面的示例中,我们使用了 Vue 3 的 `reactive` 函数来将 `items__1` 变量转换为响应式对象。然后,我们将 `items__1` 数组中的每个列表项都渲染为一个 `li` 元素,并且为每个 `li` 元素添加了一个 `button` 元素。
当用户点击某个 `button` 元素时,`change1` 函数会被调用,并且传入对应列表项的 `value` 值。在函数内部,我们使用 `Array.prototype.find` 方法来查找与该 `value` 值匹配的列表项,并且访问该列表项的 `text` 属性。最后,我们将 `text` 属性打印到控制台上。
阅读全文