让表单组件在 vuejs 中使用 ajax答案

【问题标题】：Getting a form component to work with ajax in vuejs让表单组件在 vuejs 中使用 ajax
【发布时间】：2017-07-01 21:19:51
【问题描述】：

我有一个 vuejs 组件，它是一个表单。它有一个字段“电子邮件”。如果从父组件作为名为“email”的道具提供给组件，则默认值为“email”。当用户提交表单时，我需要触发一个事件，以便父级可以获取“电子邮件”的更新值。

所以这看起来像

<parent>
  <child :email="email" />
</parent>

现在问题是我孩子的对象看起来像：

{
  props: ['email'],
  data() {return {d_email: this.email}
}

问题是，我总是在表单字段中看到一个空值。这似乎正在发生，因为我的输入表单标签如下所示：

<input type="text" v-model="d_email" :value="email" />

如果我不使用 value="email"，那么当父组件中 email 的值发生变化时，子组件不会更新，这是需要的。

但是，由于我还需要在提交表单时将输入更改发送回父级，因此我需要将输入值存储在某处。我为此使用 d_email。

然而，当孩子第一次被渲染时，prop email 为 null，因此 d_email 被初始化为 null。这意味着由于 v-model，inout 字段总是显示为 null。

这里推荐的方法是什么？

【问题讨论】：

标签： javascript ajax forms vue.js vuejs2

【解决方案1】：

在孩子中，观看email 属性。

{
  props: ['email'],
  data() {return {d_email: this.email},
  watch:{ email(newEmail){ this.d_email = email }}
}

使用监视值，您的本地电子邮件变量将在父级更改时更新。

【讨论】：

我不知道为什么，但是当计算属性可以工作时，文档在 Watch 上失败了：“当您有一些数据需要根据其他数据进行更改时，这很诱人过度使用 watch - 特别是如果你来自 AngularJS 背景。然而，使用计算属性而不是命令式 watch 回调通常是一个更好的主意"
@MarkM 通常我可能会同意。然而，在这种情况下，他有一个本地的d_email，它是v-model 的来源，所以他至少需要一个get/set 计算，其中get 是您在答案中建议的，set 是$发射。但是，他描述了在form 提交时更新父级，这意味着（对我而言）他不一定想要立即发出值。既然如此，我建议监视计算。

【解决方案2】：

要触发父组件将获取的事件，您需要将链接添加到子组件，例如：

<child :email="email" v-on:updateemail="setemail"></child>

其中updateemail 是事件的名称，setemail 是在事件触发时调用的父级方法。

在孩子中，您应该使 d_email 成为这样的计算属性：

computed: {
   d_email: function(){ return this.email }
 }

当父母更新道具时它应该更新。

把它们放在一起会给你这样的东西：

<html>
    <head>
        <script src=" https://unpkg.com/vue"></script>
    </head>
    <body>
    <div id="app">
        <parent></parent>
    </div>


    <script>
        Vue.component('parent', {
            template: '<child :email="email" v-on:updateemail="setemail"></child>',
            data: function(){
                return {
                    email: "initial@example.org"
                }
            },
            methods: {
                setemail: function(e){
                    console.log("email changed to: ", e)
                    this.email = e
                }
            }
        });

        Vue.component('child', {
            template: '<input id="emailinput" type="text" v-model="d_email" v-on:input="updateemail">',
            props: ['email'],
            methods: {
                updateemail: function(e) {
                    this.$emit("updateemail", e.target.value)
                }
            },
            computed: {
                d_email: function(){ return this.email }
            }

        });
        new Vue({
            el:'#app',
        });

    </script>
    </body>
    </html>

观察控制台，您将看到父母电子邮件属性随着用户键入而更新。如果这是访问服务器，您可能希望在用户提交而不是类型时触发事件，但这是一个微不足道的更改。

【讨论】：

如果你打算走这条路，在你的计算中使用set 值并完全避免@input 和updateemail。 d_email: {get(){return this.email}, set(v){ this.$emit('updateemail', v)}}.
这很好@bert-evans。