@fertyga098
FullStack js developer

Как передать значение input-а родителю?

у меня есть массив , и я хочу чтоб при нажатии кнопки добавить в масив добовлялось значение input , но оно поч заносить undef

вот код
//================================================================
родительский компонент

<template>
    <div id="app" class="container">
      <h1> {{ title }} </h1>
        <TodoInput :items="items" @push="pushForItem" ></TodoInput>
        <TodoList></TodoList>
    </div>
</template>

<script>

    import TodoInput from "./components/TodoInput";
    import TodoList from "./components/TodoList";

    export default {
      props: {
        value: String
      },

      data() {
        return {
          title: "TodoList",
          items: [],
        }
      },
      components: {
          TodoInput,
          TodoList
      },
      methods: {
          pushForItem() {
              var input = this.value;

              if ( this.value !== "" ) {
                  this.items.push({
                      text:input
                  })
              }
          }
      }
    }

</script>

//========================================================================

//========================================================================
дочерний компонент

<template>
    <div>
        <input type="text" v-model="value">
        <button class="btn btn-outline-secondary" @click="addItem">Add</button>
    </div>
</template>

<script>

    export default {
        props: {
            items: {
                type: Array
            },
            onValue: {
                type: String
            }
        },
        data() {
            return {
                value: ""
            }
        },

        methods: {
            addItem() {
                this.$emit("push", this.value);
            }
        }
    }

</script>
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 1
Советую автору поста перечитать смысл пропсов и работу с событиями, приходящими из дочерних компонентов.
Ответ выше решает проблему.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы