Форум программистов, компьютерный форум, киберфорум
JavaScript: Vue.js
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
394 / 147 / 31
Регистрация: 26.11.2019
Сообщений: 399
1

v-if

10.01.2021, 22:28. Показов 1018. Ответов 1
Метки нет (Все метки)

есть такой компонент, просто поле ввода и кнопка "Отправить"
файл EditDataUser.vue, дочерний
HTML5
1
2
3
4
5
6
7
8
9
10
<template>
  <div class="edit-wrapper">
    <div class="edit-item">
      <input type="text" name="" id="">
    </div>
    <div class="edit-btn">
      <input type="button" name="send" id="" value="Отправить">
    </div>
  </div>
</template>
он используется во многих местах в другом компоненте, и становится видимым по условию v-if, с этим проблем нет. Проблема как достать эту строку из v-if , чтобы использовать ее в fetch для отправки на бэк вместе со значением инпута
файл Settings.vue, родитель
HTML5
1
2
3
4
5
<div class="settings__name">
  <h3>Иван Иванов</h3>
  <a href="#" data-name="fio" @click="showEditA">(редактировать)</a>
  <EditDataUser v-if="accountSettings.fio"></EditDataUser>
</div>
т.е. мне надо в fetch передать две строки: "accountSettings.fio" и value из инпута
Как обратиться к содержимому v-if?
0
Лучшие ответы (1)
399 / 278 / 78
Регистрация: 03.12.2015
Сообщений: 658
11.01.2021, 13:46 2
Лучший ответ Сообщение было отмечено gogolik как решение

Решение

Во-первых, надо научиться использовать свойство v-model.
Оно позволяет передавать компоненту значение value и реагировать на его изменение.
https://ru.vuejs.org/v2/guide/forms.html

Т.е. в EditDataUser надо написать так:
HTML5
1
<input type="text" name="" id="" v-model="inputValue">

Во-вторых, надо научиться создавать компоненты, которые поддерживают свойство v-model, и добавить подержку этого свойства в EditDataUser. Это делается путем добавления свойства value и отправки в нужный момент события @input (например, в момент нажатия кнопки)

Cм. https://ru.vuejs.org/v2/guide/... 0%B0%D1%85


В-третьих, нужно использовать свойство v-model компонента EditDataUser в главном компоненте.
Нужный текст будет лежать в переменной myInputValue

HTML5
1
2
3
4
<div class="settings__name">
  ...
  <EditDataUser v-if="accountSettings.fio" v-model="myInputValue"/>
</div>
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.