diff options
| -rw-r--r-- | doc/development/fe_guide/vue.md | 17 | ||||
| -rw-r--r-- | doc/development/fe_guide/vuex.md | 2 |
2 files changed, 18 insertions, 1 deletions
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 62c3a05eb3b..f971d8b7388 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -123,7 +123,22 @@ You can read more about components in Vue.js site, [Component System][component- #### Components Gotchas 1. Using SVGs icons in components: To use an SVG icon in a template use the `icon.vue` -1. Using SVGs illustrations in components: To use an SVG illustrations in a template provide the path as a prop. +1. Using SVGs illustrations in components: To use an SVG illustrations in a template provide the path as a prop and display it through a standard img tag. + ```javascript + <script> + export default { + props: { + svgIllustrationPath: { + type: String, + required: true, + }, + }, + }; + <script> + <template> + <img :src="svgIllustrationPath" /> + </template> + ``` ### A folder for the Store diff --git a/doc/development/fe_guide/vuex.md b/doc/development/fe_guide/vuex.md index d0d74afe7bb..6a89bfc7721 100644 --- a/doc/development/fe_guide/vuex.md +++ b/doc/development/fe_guide/vuex.md @@ -22,6 +22,7 @@ When using Vuex at GitLab, separate this concerns into different files to improv └── mutation_types.js # mutation types ``` The following example shows an application that lists and adds users to the state. +(For a more complex example implementation take a look at the security applications store in [here](https://gitlab.com/gitlab-org/gitlab-ee/tree/master/ee/app/assets/javascripts/vue_shared/security_reports/store)) ### `index.js` This is the entry point for our store. You can use the following as a guide: @@ -189,6 +190,7 @@ Remember that actions only describe that something happened, they don't describe #### `getters.js` Sometimes we may need to get derived state based on store state, like filtering for a specific prop. +Using a getter will also cache the result based on dependencies due to [how computed props work](https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods) This can be done through the `getters`: ```javascript |