Commit fee07c3b authored by Mark Florian's avatar Mark Florian

Merge branch 'ntepluhina-update-vue-mounting-docs' into 'master'

Update Vue mounting instructions on frontend development guidelines

See merge request gitlab-org/gitlab!38302
parents a6c9368d 65873ad2
...@@ -64,11 +64,11 @@ which will make the tests easier. See the following example: ...@@ -64,11 +64,11 @@ which will make the tests easier. See the following example:
```javascript ```javascript
// haml // haml
.js-vue-app{ data: { endpoint: 'foo' }} #js-vue-app{ data: { endpoint: 'foo' }}
// index.js // index.js
document.addEventListener('DOMContentLoaded', () => new Vue({ document.addEventListener('DOMContentLoaded', () => new Vue({
el: '.js-vue-app', el: '#js-vue-app',
data() { data() {
const dataset = this.$options.el.dataset; const dataset = this.$options.el.dataset;
return { return {
...@@ -85,6 +85,8 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ ...@@ -85,6 +85,8 @@ document.addEventListener('DOMContentLoaded', () => new Vue({
})); }));
``` ```
> When adding an `id` attribute to mount a Vue application, please make sure this `id` is unique across the codebase
#### Accessing the `gl` object #### Accessing the `gl` object
When we need to query the `gl` object for data that won't change during the application's life cycle, we should do it in the same place where we query the DOM. When we need to query the `gl` object for data that won't change during the application's life cycle, we should do it in the same place where we query the DOM.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment