从特定的 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