从特定的 V-for 元素获取发射值
Get emit value from specific V-for element
我正在尝试从特定元素获取 ID。但是数据返回了尽可能多的元素,并且所有元素都具有相同的值。即使我点击另一个元素按钮,值也没有改变。The output Screenshot
我如何解决这个问题?
此处父组件代码:
<template>
<ProductsList
class="w-full"
:product="item"
@product-id="selectedID"
v-for="(item, idx) in products"
:key="idx"
/>
</template>
<script>
export default {
async asyncData(context) {
const products = await context.app
.$axios({
method: "get",
url: process.env.PROJECT_API + "/products",
headers: {
Authorization: `Bearer ${context.store.state.currentToken}`,
},
})
.then((res) => res.data.products);
return {
products,
};
},
methods: {
selectedID(id) {
this.products.find( el => {
el._id === id
console.log({id});
})
}
},
}
</script>
子组件代码:
<template>
<button @click="passId">
details
<button>
<template>
export default {
props: ['product'],
methods: {
passId() {
this.$emit('product-id', this.product._id)
}
},
}
</script>
您的 selectedID
方法将搜索到的 id
分配给每个产品。
find() returns 选中条件为 true
.
的第一项
您的 find()
不检查任何内容。相反,它将 id
分配给每个元素(您使用的是 =
而不是 ===
),而不返回任何内容,这在技术上意味着 returns undefined
,每个项目的计算结果为 false
。所以你的 .find()
没有找到任何东西。
换句话说,你必须更换
selectedID(id) {
this.products.find( el => {
el._id = id
console.log({id});
})
}
与:
selectedID(id) {
console.log(this.products.find(el => el._id === id)?._id);
}
或者,更明确地说:
selectedID(id) {
const product = this.products.find(el => el._id === id);
if (product) {
console.log(product._id);
}
}
在上面的查找中,el => el._id === id
是 shorthand for:
function(el) {
return el._id === id;
}
详细了解 arrow functions。
工作示例:
Vue.component('product-item', {
template: `<button @click="passId">details</button>`,
props: ['product'],
methods: {
passId() {
this.$emit('select-product', this.product._id);
}
}
});
new Vue({
el: '#app',
data: () => ({
products: [
{ _id: 'one' },
{ _id: 'two' },
{ _id: 'three' }
]
}),
methods: {
selectProduct(id) {
console.log(this.products.find(p => p._id === id)?._id);
}
}
})
button {
display: block;
cursor: pointer;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app">
<product-item
v-for="product in products"
:key="product._id"
:product="product"
@select-product="selectProduct" />
</div>
在上面的示例中,我更改了几个名称:
<ProductsList>
=> <ProductItem>
selectedID
=> selectProduct
我正在尝试从特定元素获取 ID。但是数据返回了尽可能多的元素,并且所有元素都具有相同的值。即使我点击另一个元素按钮,值也没有改变。The output Screenshot 我如何解决这个问题?
此处父组件代码:
<template>
<ProductsList
class="w-full"
:product="item"
@product-id="selectedID"
v-for="(item, idx) in products"
:key="idx"
/>
</template>
<script>
export default {
async asyncData(context) {
const products = await context.app
.$axios({
method: "get",
url: process.env.PROJECT_API + "/products",
headers: {
Authorization: `Bearer ${context.store.state.currentToken}`,
},
})
.then((res) => res.data.products);
return {
products,
};
},
methods: {
selectedID(id) {
this.products.find( el => {
el._id === id
console.log({id});
})
}
},
}
</script>
子组件代码:
<template>
<button @click="passId">
details
<button>
<template>
export default {
props: ['product'],
methods: {
passId() {
this.$emit('product-id', this.product._id)
}
},
}
</script>
您的 selectedID
方法将搜索到的 id
分配给每个产品。
find() returns 选中条件为 true
.
的第一项
您的 find()
不检查任何内容。相反,它将 id
分配给每个元素(您使用的是 =
而不是 ===
),而不返回任何内容,这在技术上意味着 returns undefined
,每个项目的计算结果为 false
。所以你的 .find()
没有找到任何东西。
换句话说,你必须更换
selectedID(id) {
this.products.find( el => {
el._id = id
console.log({id});
})
}
与:
selectedID(id) {
console.log(this.products.find(el => el._id === id)?._id);
}
或者,更明确地说:
selectedID(id) {
const product = this.products.find(el => el._id === id);
if (product) {
console.log(product._id);
}
}
在上面的查找中,el => el._id === id
是 shorthand for:
function(el) {
return el._id === id;
}
详细了解 arrow functions。
工作示例:
Vue.component('product-item', {
template: `<button @click="passId">details</button>`,
props: ['product'],
methods: {
passId() {
this.$emit('select-product', this.product._id);
}
}
});
new Vue({
el: '#app',
data: () => ({
products: [
{ _id: 'one' },
{ _id: 'two' },
{ _id: 'three' }
]
}),
methods: {
selectProduct(id) {
console.log(this.products.find(p => p._id === id)?._id);
}
}
})
button {
display: block;
cursor: pointer;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app">
<product-item
v-for="product in products"
:key="product._id"
:product="product"
@select-product="selectProduct" />
</div>
在上面的示例中,我更改了几个名称:
<ProductsList>
=><ProductItem>
selectedID
=>selectProduct