解决：The “data“ option should be a function that returns a per-instance value in component definitions

蔚落 2022-04-02 17:44 751阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

1. 只是想定义一个变量，方便页面上调用 。

报错：

The "data" option should be a function that returns a per-instance 
    value in component definitions.
    
    Property or method "seen" 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. See: 
    https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

我的原写法：

data: {
        A: false,
        B: true
      }

2. 原因：

**“ 一个组件的 `data` 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。”**

**这句话出自 :**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

3. 修改 ，改为：

data: function() {
        return {
          seen: true
        };
    },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2][]

再运行，OK了。

[Link 1]: https://www.captainai.net/jiangyu1013/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220402/0b2c9be72c9b4cb89443984c6a6b132f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220402/83f623b1d31b4cbaa5f876c75cd787be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2]: /images/20220402/e3871a04a90547708fa45b0369fc7e5b.png