Skip to content

Documentation: Replace references to data() with vm #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 20, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/en/api/wrapper/setData.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@ import Foo from './Foo.vue'

const wrapper = mount(Foo)
wrapper.setData({ foo: 'bar' })
expect(wrapper.data().foo).to.equal('bar')
```
expect(wrapper.vm.foo).to.equal('bar')
```
16 changes: 4 additions & 12 deletions docs/en/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ That was easy as well, so let's step up the game.

### Component data

Changing the data of the component can be quite useful for efficient testing. The method `setData({...})` is ment for changing the data and `data()` returns the current data object of the component.
Changing the data of the component can be quite useful for efficient testing. The method `setData({...})` is ment for changing the data on the instance. You can interact with the instance directly using the `vm` key. As Vue automatically sets all data values and computed properties as getters on the root instance, we can access those values straight away.
It may be useful to change the data accordingly for a whole group of specs, so `beforeEach()` could be a good place for that:

```js
Expand All @@ -102,20 +102,12 @@ describe('Data interactions', () => {
})

it('should be set to 10', () => {
expect(wrapper.data().count).to.equal(10)
expect(wrapper.vm.count).to.equal(10)
})
})

```

At this point you should also know that you can interact with the vue instance itself as well using the `vm` key.

```js
wrapper.vm.$data
// is equal to
wrapper.data()
```

### Interactions

This section will introduce two important methods of the wrapper object.
Expand All @@ -125,10 +117,10 @@ This section will introduce two important methods of the wrapper object.

describe('Trigger an event', () => {
it('button should increment the count', () => {
expect(wrapper.data().count).to.equal(0)
expect(wrapper.vm.count).to.equal(0)
const button = wrapper.find('button')
button.trigger('click')
expect(wrapper.data().count).to.equal(1)
expect(wrapper.vm.count).to.equal(1)
})
})

Expand Down