Question

我有一个App.vue，我在其中加载带有输入字段（组件）的表单。提交方法有效，但我没有从表单输入字段标题中获取任何数据。

我怎样才能做到这一点？

App.vue：

<form v-on:submit.prevent="getFormValues">
    <page-header :title="'Banner toevoegen'"></page-header>
    <form-input :label="'title'" :labelvalue="'Titel'" :type="'text'" :placeholder="''" :name="'title'" :value="''" :classname="'form-control'" :id="''"></form-input>
    <form-input :label="''" :labelvalue="''" :type="'submit'" :placeholder="''" :name="'title'" :value="'banner toevoegen'" :classname="'form-control'" :id="''"></form-input>
</form>

AND方法

methods: {
        getFormValues (submitEvent) {
            this.name = submitEvent.target.elements.title.value
            console.log(this.title)
        },

Input.vue：

<template>
     <div>
        <div class="form-group">
            <label v-if="label" :for="label" v-html="labelvalue"></label>
            <input :type="type" :placeholder="placeholder" :name="name" :value="value" :class="classname" :id="id">
        </div>
     </div>
</template>


<script>
    export default {
        props: {
            type: String,
            placeholder: String,
            name: String,
            value: String,
            classname: String,
            id: String,
            label: String,
            labelvalue: String
        }
    }
</script>

Answer 1

您可以使用 $ event 变量来执行此操作，它可以在内联语句处理程序中访问原始DOM事件。

所以你应该在form-input：

中有类似的内容

<template>
    <input
      v-on:input="updateValue($event)"
      type="text" 
    />
</template>

<script>
export default {
  methods: {
    updateValue: function (evt) {
      this.$emit('input', evt)
    }
  }
}
</script>

在app.vue（父组件）中，您可以访问该DOM元素：

<template>
  <div id="app">
    <form-input
      v-on:input="evt => {value = evt.target.value}"
    />
  </div>
</template>

请看一下这个简单的工作示例https://jsfiddle.net/ricardoorellana/cj6gtsL5/2/

Vuejs从其他组件返回表单数据

1 个答案: