Question

我正在尝试制作一个组件，但这是说我尚未定义“ addToCart”。我已经在同一组件中定义了它，但是我仍然遇到相同的错误？

Vue.component("solid-back",{
    template: `
    <div>
        <h1>{{ title }}</h1>
        <img :src="image">
        <h3>Price</h3>
        <p>{{price}}</p>
        <ul id="deets">
            <li v-for="detail in details">{{ detail }}</li>
        </ul>
            <button v-on:click="addToCart" 
                id="btn_add-to-cart">
                Add to Cart
            </button>
            <button id="btn_buy-now">
                Buy Now
            </button>
    </div>
    `,
    data() {
        return {
            title: "Solid Back Black Chair",
            image: "./photos/chairs/solidblack.jpg",
            price: "$34.00",
            details: ["3 feet tall", "Oakwood", "8 pounds"],
        }
    },
    method: {
        addToCart() {
            this.$emit("add-to-cart")
        }
    }
})

这是我继续收到的警告 [Vue warn]: Property or method "addToCart" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property.

Answer 1

要在Vue中定义方法，属性键为methods。您的methods属性似乎拼写错误（单数）method。

将其更改为methods: { ... }应该可以：

    methods: {
        addToCart() {
            this.$emit("add-to-cart")
        }
    }

Answer 2

您好，"Solve Chinese garbled"欢迎您使用Stack Overflow。

记住Terrance的工作方式。拥有键和关联的属性

objects

现在const foo = { name: 'Satyam' }是具有属性foo的{{1}}。

因此，当您尝试登录object时，您会得到name 但是，如果您尝试记录console.log(foo.name)之类不存在的内容，您将一无所获，因为satyam没有任何名为foo.age的属性。

以同样的方式，foo也是age，它具有属性Vue，当您在该object属性中写入methods时，可以像这样fn

现在在您的问题中，您在属性名称methods中创建了一个Vue -> methods -> yourFunction，这没关系，因为这不是错误，您可以将任何属性添加到fn而是{{1 }} method带有object预定义的Vue（例如binded等）的模板将无法识别它。因此，您必须将vue添加到properties属性中，以使methods / computed / data能够识别它。

这就是Vue错误的解释-

[Vue警告]：属性或方法“ addToCart”未在实例，但在渲染过程中被引用。确保此属性是在data选项或基于类的组件中，通过初始化属性。

属性/方法method/ function未定义，但在渲染期间引用-在您的methods中，您尝试执行在{{中找不到的方法/ fn名称template 1}}，因为addToCart不是template到addToCart-它正在寻找可用方法中的函数Vue available properties-method？不存在

我希望它能帮助您！

Vue.js在实例上未定义属性或方法“ addToCart”

2 个答案: