如何在 Vue 2 中设置组件非反应性数据?

新手上路,请多包涵

我有一个类别数组,它被加载一次(在创建的钩子中),然后它一直是静态的。我在组件模板中呈现这些数组值。

 <template>
    <ul>
        <li v-for="item in myArray">{{ item }}</li>
    </ul>
</template>

我的数据属性看起来(它不包括 myArray - 我不想要反应绑定):

 data() {
    return {
        someReactiveData: [1, 2, 3]
    };
}

我的创建钩子:

 created() {
    // ...
    this.myArray = ["value 1", "value 2"];
    // ...
}

问题是,Vue 抛出错误——我不能在模板中使用 myArray,因为在创建 DOM 时没有创建这个变量——挂载。

那么如何做到这一点呢?或者哪里可以存储组件常量?

原文由 Dave 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 676
2 个回答

Vue 将 data 选项中的所有属性设置为 setter/getter 以使其具有反应性。 深入了解反应性

由于您希望 myArray 是静态的,您可以将其创建为自定义选项,可以使用 vm.$options

 export default{
    data() {
        return{
            someReactiveData: [1, 2, 3]
        }
    },
    //custom option name myArray
    myArray: null,
    created() {
        //access the custom option using $options
        this.$options.myArray = ["value 1", "value 2"];
    }
}

您可以在模板中迭代此自定义选项,如下所示:

 <template>
    <ul>
        <li v-for="item in $options.myArray">{{ item }}</li>
    </ul>
</template>

这是 小提琴

原文由 Vamsi Krishna 发布,翻译遵循 CC BY-SA 4.0 许可协议

实际上,在 this 中的 created() 上设置属性应该可以开箱即用:

 <template>
  <div id="app">
    <ul>
      <li v-for="item in myArray" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.myArray = [
      'item 1',
      'item 2'
    ];
  }
};
</script>

将呈现

<div id="app">
  <ul>
    <li>
      item 1
    </li>
    <li>
      item 2
    </li>
  </ul>
</div>

在这里演示: https ://codesandbox.io/s/r0yqj2orpn。

原文由 BogdanL 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题