In a Vue component, I am looking to utilize data that remains constant. The issue arises when attempting to implement the following code:
const numbers = [1, 2, 3]
new Vue({
el: "#app"
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="number in numbers">
{{number}}
</div>
</div>This code fails with the error message:
[Vue warn]: Property or method "numbers" is not defined on the instance but referenced during render. Ensure the property is reactive by including it in the data option for class-based components. Refer to: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
The warning suggests an attempt to use 'numbers' in a reactive manner. In this case, the intention is for the data to remain static, as indicated by the 'const' declaration.
To resolve the issue, pushing 'numbers' into the instance can be done which resolves the problem:
new Vue({
el: "#app",
data: {
numbers: [1, 2, 3]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js><br /></script><br /><div id="app"><br /><div v-for="number in numbers"><br />{{number}}<br /></div><br /></div>However, there may be reservations about this approach, considering that 'data' typically stores information prone to change and those changes are reflected in the DOM.
What is the appropriate method of utilizing constant, unchanging data in Vue? (specifically regarding where to declare it)