0

Пожалуйста, помогите мне. Я пытаюсь 10 часов подряд, но ничего не получается. Я хочу, чтобы при нажатии в @click="cleanDataForm" в родительском компоненте => text v-модел в дочернем компоненте был "" . И я попробовал сделать это с помощью props, computed, vuex- и ничего. Я буду очень признателен, если вы поможете .

//Родительский

<template>
    <div class="Main">
        <div class="comment">
            <Smiles
            />
            <div class="btns">
                <button id="btn--send" type="submit" @click="sendData">Send data</button>
                <button id="btn--clear" @click="cleanDataForm">clean data</button>
            </div>
        </div>
    </div>
</template>

//Дочерний

<template>
    <div class="container">
        <textarea
            v-model="text"                          !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
            ref="smilesTextarea"
            placeholder="Введите комментарий"
        ></textarea>
        <button @click="showSimiles">😀</button>
    </div>
</template>

И мне нужно this.text="", когда я нажал отправить данные в родительском. Сказали как-то можно через refs,но не знаю как. Буду очень признателен если поможете.

1
  • Если вы используете vue3 + подход composition api = vuex вам нахрен не нужен) P.S. читал только заголовок вопроса :)
    – Jour
    Commented 29 авг. 2023 в 18:04

1 ответ 1

0

Если вы хотите очищать text из родительского компонента, то он должен быть частью data родительского компонента и передаваться в дочерний через props.

Родительский:

<script>
...
data(){
  return {text: ''}
},
methods: {
  cleanDataForm(){
    this.text = '';
  }
  sendData() {
    ...
    this.cleanDataForm();
  }
}
...
</script>
<template>
    <div class="Main">
        <div class="comment">
            <Smiles
              v-bind:text="text"
            />
            <div class="btns">
                <button id="btn--send" type="submit" @click="sendData">Send data</button>
                <button id="btn--clear" @click="cleanDataForm">clean data</button>
            </div>
        </div>
    </div>
</template>

Дочерний:

...
  props: ['text'],

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.