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

我试图制作一个组件，但它说我还没有定义“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.component（“实心背”{
模板：`
{{title}}
价格
{{price}}


{{detail}

添加到购物车
立即购买
`,
数据（）{
返回{
标题：“黑色实心靠背椅子”，
图片：“./photos/chairs/solidblack.jpg”，
价格：$34.00，
详情：[“3英尺高”、“奥克伍德”、“8磅”]，
}
},
方法：{
addToCart（）{
此.$emit（“添加到购物车”）
}
}
})

这是我不断得到的警告

[Vue warn]：属性或方法“addToCart”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。

要在Vue中定义方法，属性键为

方法

。您的

方法

属性似乎拼写错误（单数）

方法

将其更改为

方法：{…}

应该可以：

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

---

要在Vue中定义方法，属性键为

methods

。您的

方法

属性似乎拼写错误（单数）

方法

将其更改为

方法：{…}

应该可以：

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

---

嗨

Terrance

欢迎来到堆栈溢出

记住

对象是如何工作的。有一个密钥及其关联的属性

const foo  = {
  name: 'Satyam'
}

现在
foo
是一个
对象
，它有一个属性
名称

因此，当您尝试记录它时，
console.log（foo.name）
您将得到
satyam
但是如果你试图记录一些不存在的东西，比如
foo.age
，你将一无所获，因为
foo
没有任何称为
age
的属性

同样地，
Vue
在这里也是一个
对象，它有一个属性
methods
，当您在
methods
属性中编写
fn
时，您可以像这样看到它
Vue->methods->yourFunction

现在在您的问题中，您在属性名
方法
中创建了一个
fn
，这是可以的，因为它不是一个错误，您可以将任何属性添加到
对象
，但是
Vue
模板中，该模板与
Vue
绑定
预定义的
属性
例如
方法/计算/数据
等将无法识别它。因此，您必须在
方法
属性中添加
方法/函数
，以使
模板
能够识别它

这就是Vue错误所解释的-

[Vue warn]：未在上定义属性或方法“addToCart”
实例，但在渲染期间被引用。请确保此属性为
在数据选项或基于类的组件中，通过
正在初始化属性

属性/方法
addToCart
未定义，但在渲染过程中引用意味着-在
模板中
您正在尝试执行一个方法/fn name
addToCart
，它在
Vue可用属性中找不到该方法，因为
方法
未绑定到
模板/html
-它正在寻找vue可用方法中的函数
addToCart
-
vue.methods.addToCart
？？这是不存在的

我希望这会有帮助
 Hi
Terrance
欢迎来到堆栈溢出

记住
对象是如何工作的。有一个密钥及其关联的属性

const foo  = {
  name: 'Satyam'
}

现在
foo
是一个
对象
，它有一个属性
名称

因此，当您尝试记录它时，
console.log（foo.name）
您将得到
satyam
但是如果你试图记录一些不存在的东西，比如
foo.age
，你将一无所获，因为
foo
没有任何称为
age
的属性

同样地，
Vue
在这里也是一个
对象，它有一个属性
methods
，当您在
methods
属性中编写
fn
时，您可以像这样看到它
Vue->methods->yourFunction

现在在您的问题中，您在属性名
方法
中创建了一个
fn
，这是可以的，因为它不是一个错误，您可以将任何属性添加到
对象
，但是
Vue
模板中，该模板与
Vue
绑定
预定义的
属性
例如
方法/计算/数据
等将无法识别它。因此，您必须在
方法
属性中添加
方法/函数
，以使
模板
能够识别它

这就是Vue错误所解释的-

[Vue warn]：未在上定义属性或方法“addToCart”
实例，但在渲染期间被引用。请确保此属性为
在数据选项或基于类的组件中，通过
正在初始化属性

属性/方法
addToCart
未定义，但在渲染过程中引用意味着-在
模板中
您正在尝试执行一个方法/fn name
addToCart
，它在
Vue可用属性中找不到该方法，因为
方法
未绑定到
模板/html
-它正在寻找vue可用方法中的函数
addToCart
-
vue.methods.addToCart
？？这是不存在的

我希望这会有帮助
 所提供的答案被标记为低质量职位，以供审查。这是