獲取表單組件以在vuejs中使用ajax

我有一個vuejs組件，它是一個窗體。它有一個「電子郵件」字段。如果從父項給予組件的默認值爲「email」，則爲名爲「email」的道具。當用戶提交表單時，我需要觸發一個事件，以便父母可以獲取「電子郵件」的更新值。獲取表單組件以在vuejs中使用ajax

，它看起來

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

現在的問題是我孩子的物體看起來像：

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

的問題是，我經常看到一些表單字段爲空值。這似乎發生，因爲我的輸入表單標籤如下所示：

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

如果我不使用值=「電子郵件」，然後在子組件將不會更新時在父電子郵件的值更改，這是必要的。

但是，由於我還需要在提交表單時將輸入更改發送回父級，所以我需要將輸入值存儲在某處。我正在使用d_email。

但是，當孩子第一次呈現時，道具郵件爲空，因此d_email被初始化爲空。這意味着由於v模型，inout字段總是顯示爲空。

這裏推薦的方法是什麼？

來源

2017-07-01 Amit

在孩子，看email財產。

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

使用監視的值，您的本地電子郵件變量將隨父母更改而更新。

來源

2017-07-01 22:21:53 Bert

我不確定爲什麼，但文檔在計算屬性起作用時出現在「Watch」上：「當您需要根據其他某些數據更改某些數據時，會過度使用手錶 - 特別是如果您來自AngularJS背景，但是，使用計算屬性而不是命令式手錶回調通常是一個更好的主意「 –

@MarkM通常我可能會同意。然而，在這種情況下，他有一個本地'd_email'，它是'v-model'的源頭，所以他最低限度需要一個get/set來計算，其中'get'是你在你的答案中提出的建議，'set'是$ emit。但是，他描述了在「表單」提交時更新父項，這意味着（對我而言）他不一定要立即*發送值*。既然如此，我建議對計算機進行觀察。 – Bert

觸發事件，該家長會拿起你需要將鏈接添加到子組件，如：

<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: "[email protected]" 
       } 
      }, 
      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>

看控制檯，你會看到家長email屬性得到更新的用戶類型。如果這是一個服務器，你可能希望事件在用戶提交時觸發而不是類型，但這是一個微不足道的變化。

來源

2017-07-01 22:19:53

如果你要走這條路線，在計算過程中使用'set'值，並避免使用'@ input'和'updateemail'。 'd_email：{get（）{return this.email}，set（v）{this。$ emit（'updateemail'，v）}}'。 – Bert

很好@伯特伊萬斯。 –

獲取表單組件以在vuejs中使用ajax

回答

相關問題