summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFilipa Lacerda <filipa@gitlab.com>2018-05-07 10:09:49 +0100
committerFilipa Lacerda <filipa@gitlab.com>2018-05-07 10:09:49 +0100
commitd453257ff3a654b02f6d39f882a81c5d2a823750 (patch)
tree4c1c7807053359117c8fd866d27083b3782de7d9
parent1983356d647290fe38ca21bbbca43fe2d6292913 (diff)
downloadgitlab-ce-d453257ff3a654b02f6d39f882a81c5d2a823750.tar.gz
Follow up after review
-rw-r--r--doc/development/fe_guide/vue.md17
-rw-r--r--doc/development/fe_guide/vuex.md2
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