как отправить значение входных данных из объекта данных дочернего компонента в родительский? - PullRequest
Новая
       79

как отправить значение входных данных из объекта данных дочернего компонента в родительский?

0 голосов
/ 21 июня 2020

Я пытаюсь отправить переменные входных данных из формы дочернего компонента в родительский компонент через объект данных 'data ()'. Я видел, как vuejs обновлял родительские данные из статьи о дочернем компоненте , и пытался это сделать, но не могу $ испустить захваченный объект данных через событие. не могли бы вы мне помочь.

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

<script>
    import inputform from '../components/form.vue';
    import axios from 'axios';

  export default {
      name: 'helloword',
      data() {
          return {
          }
      },
    components: {
        inputform
    },
      methods: {
          submit() {
                const path = 'http://127.0.0.1:5000';
                axios.post(path, {
                    name: inputform.data()

                })
              .then(() => {
                  const result = 'Sucess!';
                  console.log(result);
              })
              .catch((error) => {
                  console.log(error);
              })
          }
      }
  }
</script>

Дочерний компонент: 

<template>
    <div>
  <table>
    <thead>
    <th>Name</th>
    <th>Email</th>
    <th>Age</th>
    </thead>
    <tr>
      <td><input type="text" id="name" v-model="details.name" @focusout="inputdata"></td>
      <td><input type="text" id="name1" v-model="details.name1" @focusout="inputdata" ></td>
      <td><input type="number" id="age" v-model="details.age" @focusout="inputdata" ></td>

    </tr>
  </table>
    </div>
</template>

<script>
    export default {
        name: "inputform",
      data() {
          return {
            details: {
            name: '',
            name1: '',
            age: ''
              }
          }
      },
      methods: {
            inputdata() {
              this.$emit("input_data", this.details)
            }
      }
    }
</script>

<style scoped>

</style>

Итак , ищет помощь с передачей переменных данных из дочернего компонента в родительский и выполняет операцию отправки в API, используя ax ios из родительского компонента. Если есть другой способ лучше, дайте мне знать. Спасибо.

Ответы [ 2 ]

0 голосов
/ 21 июня 2020

При установке v-model вам не нужен v-on. Вы также можете записать детали в один такой объект, а затем передать его как часть генерируемого события.

Дочерний компонент 

<template>
  <div>
    <table>
      <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
      </thead>
      <tr>
        <td>
          <input type="text" id="name" v-model="details.name">
        </td>
        <td>
          <input type="email" id="email" v-model="details.email">
        </td>
        <td>
          <input type="number" id="age" v-model="details.age">
        </td>
        <td>
          <button @click="inputdata">Submit</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "inputform",
  data() {
    return {
      details: {
        name: "",
        email: "",
        age: ""
      }
    };
  },
  methods: {
    inputdata() {
      console.log(this.details);
      this.$emit("handledata", this.details);
    }
  }
};
</script>

Родительский компонент 

<template>
  <div id="app">
    <HelloWorld v-on:handledata="handleInput"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  methods: {
    handleInput(data) {
      // object emitted from the child component
      console.log({ data });
    }
  }
};
</script>
0 голосов
/ 21 июня 2020

сначала вы должны передать максимум два параметра методу $ emit, вот документы: https://vuejs.org/v2/api/#vm -emit , а второй - v-on: до того, как v-models станут дополнительными. поэтому в решении вы можете передать эти данные в одном объекте вместо трех данных, поэтому код будет таким: 


      data() {
          return {
            name: '',
            email: '',
            age: '',
          }
      },
      methods: {
            inputdata() {
              this.$emit("input", {
                name: this.name, 
                email: this.email, 
                age: this.age
              })
            }
      }

или мой предпочтительный вариант поместить все в данные формы, подобные этому 

<template>
    <div>
  <table>
    <thead>
    <th>Name</th>
    <th>Email</th>
    <th>Age</th>
    </thead>
    <tr>
      <td><input type="text" id="name" v-model="form.name"></td>
      <td><input type="email" id="email" v-model="form.email"></td>
      <td><input type="number" id="age" v-model="form.age"></td>
    </tr>
  </table>
    </div>
</template>

<script>
    export default {
        name: "inputform",
      data() {
          return {
            form: {
              name: '',
              email: '',
              age: '',
            }
          }
      },
      methods: {
            inputdata() {
              this.$emit("input", this.form)
            }
      }
    }
</script>
...