It is possible to specify certain object properties not to be rendered? This is useful when debugging and masking big objects or objects that form a loop.
For example, if there was an object
const a = {a: 1, b: 2}
I would only want Vue to display {a: 1} not just make b unreactive.
So in Vue 2;
The data property within the vue component object is where you are given reactivity as a default.
on initialisation: You can set the data model as the following:
Vue 2
//... vue object
data: {
a: 1,
b: null // [1]
}
// if you call this.b, without setting data you may get an error
thereafter, if you wish to only set the property of b,
You can set this property with the following computed
computed: {
b: {
get: function() {
return this.b
},
set: function(newVal) {
this.b = newVal;
}
}
}
Vue3: Beta
In Vue 3, [Apr. 2020, subject to change until Vue 3 release] the component initialisation will be replaced with a setup method, similar to react hooks, also known as the Composition API.
import { ref, computed } from "vue";
export default {
name: "component",
setup() {
const a = ref(1)
const updateA = () => {
a.value++ //
}
const b = ref(1)
const updateB = computed(() => {
return b // change b
})
return {
a, updateA,
b
}
}
}
