Skip to content

Commit

Permalink
vue docs update (#661)
Browse files Browse the repository at this point in the history
  • Loading branch information
ckritzinger authored and gauravtiwari committed Aug 18, 2017
1 parent bddfb95 commit bd99b32
Showing 1 changed file with 37 additions and 2 deletions.
39 changes: 37 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,8 @@ document.addEventListener('DOMContentLoaded', () => {

#### Vue

Add the data as attributes in the element you are going to use (or any other element for that matter).

```erb
<%= content_tag :div,
id: "hello-vue",
Expand All @@ -614,17 +616,50 @@ document.addEventListener('DOMContentLoaded', () => {
<% end %>
```

This should produce the following HTML:

```html
<div id="hello-vue" data-name="David" data-message="Hello!"></div>
<div id="hello-vue" data="{&quot;message&quot;:&quot;Hello!&quot;,&quot;name&quot;:&quot;David&quot;}"></div>
```

Now, modify your Vue app to expect the properties.

```html
<template>
<div id="app">
<p>{{test}}{{message}}{{name}}</p>
</div>
</template>

<script>
export default {
// A child component needs to explicitly declare
// the props it expects to receive using the props option
// See https://vuejs.org/v2/guide/components.html#Props
props: ["message","name"],
data: function () {
return {
test: 'This will display: ',
}
}
}
</script>

<style>
</style>

```


```js
// Render component with props

document.addEventListener('DOMContentLoaded', () => {

// Get the properties BEFORE the app is instantiated
const node = document.getElementById('hello-vue')
const props = JSON.parse(node.getAttribute('data'))

// Render component with props
new Vue({
render: h => h(App, { props })
}).$mount('#hello-vue');
Expand Down

0 comments on commit bd99b32

Please sign in to comment.