Как связать компонент формы в Vue js?

Question

[aleks_web_dev]

У меня есть компонент формы мне нужно передавать значение из инпутов в компонент App
Из инпута и тексареи надо взять значения и передать их в App в data
Сделал при помощи $emit но есть ли более правильные решения

Form.vue

<template>
  <div>
    <slot></slot>
    <form @submit.prevent>
      <div class="form-group">
        <label for="title">Title</label>
        <input type="text" class="form-control" id="title" v-model="title" />
      </div>

      <div class="form-group">
        <label for="text">Text</label>
        <textarea class="form-control" id="text" v-model="text"></textarea>
      </div>

      <button type="submit" class="btn btn-primary" @click="addToDo">Submit</button>
    </form>
  </div>
</template>


<script>
export default {
  name: "Form",
  data() {
    return {
      title: "",
      text: "",
    };
  },
  methods: {
    addToDo() {
      const newToDo = {
        title: this.title,
        text: this.text,
        id: Math.random(),
      };
        this.text =''; 
        this.title = '';

        this.$emit('addToDoItem',newToDo)
    },
  },
};
</script>

App.vue

<template>
  <div class="container pt-5">
    <form-component
    @addToDoItem="addToDo($event)"
    >
      <h1>ToDo list app</h1>
    </form-component>
    
    <hr />

    <ul class="list-group">
      <to-do-item 
      v-for="item in todoArr" :key="item.id"
      :title='item.title'
      :text='item.text'
      :id="item.id"
      :delite='delite'  
      > 
      </to-do-item>
    </ul>
  </div>
</template> 

<script>
import ToDoItem from './components/ToDoItem';
import FormComponent from './components/Form'

export default {
  name: 'App',
  data() {
    return {
      title:'',
      text:'',
      todoArr:[
        {
          title:'Hello 1111',
          text:'Lorem ipsum dolor sit.',
          id:Math.random()*100
        },
        {
          title:'Hello 2222',
          text:'Lorem ipsum dolor sit.',
          id:Math.random()*100
        },

      ]
    }
  },
  components: {
    ToDoItem,
    FormComponent,
  },
  methods:{
    delite(id){
      this.todoArr = [...this.todoArr].filter(item=>item.id !== id)
    },
    addToDo(obj){
      
      // const newToDo = {
      //   title:this.title,
      //   text:this.text,
      //   id:Math.random()
      // }

      // this.text ='' 
      // this.title = ''

      this.todoArr = [...this.todoArr,obj]
    }
  }
}
</script>

Answer 1

[Антон Антон]

Я бы заменил два свойства на один объект newItem: {title:'', text:''}, передал бы его в качестве v-model в компонент.
В компоненте что-то типа такого:

...
props:['value'],
data(){return {local: null}},
watch: {
value: {handler(newVal) {this.local=newVal}, deep: true, immediate: true},
local: {handler(newVal) {this.$emit('input', newVal)}, deep: true}
}
...

Comments

[Владислав Лысков]

На сколько ты считаешь своё решение правильным? Я в данном случае храню в в vuex, и меня коробит мысль о том, что я делаю vuex не по назначению

[Антон Антон]

Когда использовать vuex каждый решает сам. Для меня - когда данные нужны более чем в одном компоненте или когда компонент не всегда показывается (хотя тогда можно использовать keep-alive). В данном случае этот критерий говорит, что vuex не нужен.
Если бы компонент ввода нового ещё не был бы прямым потомком, при невозможности использовать v-model, тоже был бы выбор между vuex/shared storage и event bus. Для самого простого примера я бы использовал event bus (принимая во внимание самый первый и самый главный критерий), но даже чуть сложнее - только vuex.

[Владислав Лысков]

Антон Антон, спасибо! очень признателен за разъяснения

Answer 2

[Roman Sokolov]

В данном случае $emit подойдет. Если проект будет усложнятся, то нужно будет переходить на vuex (например, если нужно будет прокидывать данные через несколько компонентов, а не сразу в родительский).