Skip to content
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

docs(ru): ru translation (completed) #2570

Open
wants to merge 38 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
2d5f757
start ru translation
VisualYuki Dec 18, 2024
b14960d
docs(ru): add `forms` page, check spelling
VisualYuki Dec 22, 2024
a4d5562
docs(ru): add `passing-data` page
VisualYuki Dec 23, 2024
dd67cd1
add 'easy-to-test' page
VisualYuki Dec 26, 2024
072cd79
add 'slots' page
VisualYuki Dec 27, 2024
7a81ab7
add 'asynchronous-behavior' page
VisualYuki Dec 29, 2024
c632c7b
add `http-requests`
VisualYuki Dec 30, 2024
143530b
add `transitions` & `community-learning` pages
VisualYuki Dec 31, 2024
6f1dceb
add `component instance` page
VisualYuki Jan 1, 2025
94731f4
add `reusability and composition` page
VisualYuki Jan 3, 2025
09f24a1
add `testing v-model` page
VisualYuki Jan 3, 2025
935bd04
add `vuex` page
VisualYuki Jan 6, 2025
56b7334
add `teleport` page
VisualYuki Jan 7, 2025
13c373e
add `vue-router` page
VisualYuki Jan 9, 2025
b01d5fd
add `ssr` page
VisualYuki Jan 10, 2025
f5609af
add `stubs and shallow mount` page
VisualYuki Jan 14, 2025
1d65751
add `api` page to avoid errors
VisualYuki Jan 14, 2025
cccd0fb
add `api` page
VisualYuki Jan 20, 2025
94dedf7
add `plugin` page
VisualYuki Jan 21, 2025
fde0982
add `faq` page
VisualYuki Jan 22, 2025
4f3ce4b
add `migration` page
VisualYuki Jan 23, 2025
3d0ad4a
fixes
VisualYuki Jan 23, 2025
3fd69e2
Update docs/ru/guide/advanced/async-suspense.md
VisualYuki Jan 24, 2025
4ebfd41
Update docs/ru/guide/advanced/async-suspense.md
VisualYuki Jan 24, 2025
8fee057
Update docs/ru/guide/advanced/async-suspense.md
VisualYuki Jan 24, 2025
171591c
Update docs/ru/guide/advanced/transitions.md
VisualYuki Jan 24, 2025
c695ada
Update docs/ru/guide/advanced/vue-router.md
VisualYuki Jan 24, 2025
6a9f152
Update docs/ru/guide/advanced/vuex.md
VisualYuki Jan 24, 2025
34f05d4
Update docs/ru/guide/advanced/vue-router.md
VisualYuki Jan 24, 2025
f6a891d
Update docs/ru/guide/advanced/vuex.md
VisualYuki Jan 24, 2025
638269d
Update docs/ru/guide/essentials/a-crash-course.md
VisualYuki Jan 24, 2025
db2e7fc
Update docs/ru/guide/essentials/a-crash-course.md
VisualYuki Jan 24, 2025
519f7d2
Update docs/ru/guide/essentials/event-handling.md
VisualYuki Jan 24, 2025
75bc2ba
Update docs/ru/guide/index.md
VisualYuki Jan 26, 2025
59177ca
Update docs/ru/guide/index.md
VisualYuki Jan 26, 2025
5bc6635
Update docs/ru/guide/essentials/forms.md
VisualYuki Jan 26, 2025
4c56973
Update docs/ru/guide/index.md
VisualYuki Jan 26, 2025
5077799
Update docs/ru/guide/advanced/vue-router.md
VisualYuki Jan 26, 2025
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
Prev Previous commit
Next Next commit
add testing v-model page
VisualYuki committed Jan 3, 2025
commit 09f24a1aa09c6f9e35e1202c746eb960d94b8326
98 changes: 98 additions & 0 deletions docs/ru/guide/advanced/v-model.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
# Тестирование `v-model`

При написании компонентов, которые полагаются на `v-model` взаимодействие (`update:modelValue` событие), вам нужно обработать `event` и `props`.

Ознакомьтесь с ["vmodel integration" Discussion](https://github.com/vuejs/test-utils/discussions/279) для некоторых решений от сообщества.

Ознакомьтесь с [VueJS VModel event documentation](https://vuejs.org/guide/components/events.html#usage-with-v-model).

## Простой пример

Ниже простой Editor компонент:

```js
const Editor = {
props: {
label: String,
modelValue: String
},
emits: ['update:modelValue'],
template: `<div>
<label>{{label}}</label>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</div>`
}
```

Этот компонент будет просто вести себя как входной компонент:

```js
const App = {
components: {
Editor
},
template: `<editor v-model="text" label="test" />`,
data(){
return {
text: 'test'
}
}
}
```

Теперь, когда мы вводим что-либо в input, он обновит `text` в вашем компоненте.

Для тестирования этого поведения:

```js
test('modelValue should be updated', async () => {
const wrapper = mount(Editor, {
props: {
modelValue: 'initialText',
'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
}
})

await wrapper.find('input').setValue('test')
expect(wrapper.props('modelValue')).toBe('test')
})
```

# Множественный `v-model`

В некоторых случаях мы можем иметь несколько `v-model`, нацеленных на определенные свойства.

Пример с Money Editor мы можем иметь `currency` и `modelValue` свойства.

```js
const MoneyEditor = {
template: `<div>
<input :value="currency" @input="$emit('update:currency', $event.target.value)"/>
<input :value="modelValue" type="number" @input="$emit('update:modelValue', $event.target.value)"/>
</div>`,
props: ['currency', 'modelValue'],
emits: ['update:currency', 'update:modelValue']
}
```

Мы можем протестировать их обоих:

```js
test('modelValue and currency should be updated', async () => {
const wrapper = mount(MoneyEditor, {
props: {
modelValue: 'initialText',
'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
currency: '$',
'onUpdate:currency': (e) => wrapper.setProps({ currency: e })
}
})

const [currencyInput, modelValueInput] = wrapper.findAll('input')
await modelValueInput.setValue('test')
await currencyInput.setValue('£')

expect(wrapper.props('modelValue')).toBe('test')
expect(wrapper.props('currency')).toBe('£')
})
```