传递位于 Vue 3 中 v-for 循环之外的 object 的选定索引

Question

出于学习目的，我正在 Vue 3 中创建一个简单的购物车。

到目前为止，我已经设置了从 products object 到 addToCart() 功能的所有内容，并且所有内容都在 v-for 循环中运行。

问题是我需要在位于 v-for 循环之外的警报中显示产品的标题，但我不知道如何在 Vue 中执行此操作。

我尝试了 emit 和 provide，但没有用。我可以通过 provide 将整个 object 发送到 child 组件 Alert.vue 但这没有帮助，因为我只需要获取所选产品的当前索引即可获取它的标题。

您可以在此处查看演示 https://codesandbox.io/s/vue-cart-54ioqt?file=/src/App.vue

尝试将产品添加到购物车两次并检查警报。目前它正在显示整个购物车 object，但我只需要获取产品的 title，这样警报就会显示 You have already added {product.title} to your cart

App.vue

export default {
    name: 'App',
    components: {
        CartAlert
    },
    data() {
        return {
            products: [
                {id: 1, title: 'Samsung A70', price: 50},
                {id: 2, title: 'Kindle Reader', price: 50},
                {id: 3, title: 'Meta Quest 2', price: 100},
                {id: 4, title: 'LG LED 43" TV', price: 200},
            ],
            discountInput: '',
            discountValid: false,
            cart: [],
            total: '',
            alreadyAddedToCart: false
        }
    },
    methods: {
        addToCart(index) {
            if (this.cart.includes(this.products[index])) {
                this.alreadyAddedToCart = true
            } else {
                this.cart.push(this.products[index])
            }
        },
    },
    provide() {
        return {
            cart: this.cart
        }
    }
}

Alert.vue（child 分量）

<template>
    <div id="alert" class="alert alert-danger alert-dismissible fade show" role="alert">
        You have already added this {{ cart }} to your cart.
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
                @click="$emit('dismissAlert')"></button>
    </div>
</template>

<script>
export default {
    name: "CartAlert",
    props: ['product'],
    inject: ['cart'],
    mounted() {
        console.log()
    }
}
</script>

Answer 1

您可以在购物车组件中展示您的道具 product：

You have already added this {{ product }} to your cart.

在应用程序中添加 item 到数据功能：

item: null

在方法中为该数据添加标题属性:

this.item = this.products[index].title
this.alreadyAddedToCart = true;

在模板中将您的属性绑定到 item:

:product="item"

your demo

传递位于 Vue 3 中 v-for 循环之外的 object 的选定索引

Pass selected index of object that resides outside of a v-for loop in Vue 3

javascript

vue.js

vue-component

vuejs3