从特定的 V-for 元素获取发射值

Question

我正在尝试从特定元素获取 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>

Answer 1

您的 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

从特定的 V-for 元素获取发射值

Get emit value from specific V-for element

vue.js

nuxt.js

v-for

emit