From dcab51dd7e4408946db30b0803f7f79863c929da Mon Sep 17 00:00:00 2001 From: Timi Omoyeni Date: Sat, 7 Nov 2020 00:37:04 +0100 Subject: [PATCH] Add inject example to reactive section of docs This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`. --- src/guide/component-provide-inject.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md index 932e296b39..a7be5b6983 100644 --- a/src/guide/component-provide-inject.md +++ b/src/guide/component-provide-inject.md @@ -107,6 +107,13 @@ app.component('todo-list', { } } }) + +app.component('todo-list-statistics', { + inject: ['todoLength'], + created() { + console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5 + } +}) ``` -In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity) +In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `computed` in the [Computed and Watch section](reactivity-computed-watchers.html#computed-values) and `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity).