vue.js表單提交沒有得到模型綁定

HTML：

<form ref="myForm" action="/AAA/BBB" method="get"> 
    <input type="text" hidden="hidden" v-model="myValue" name="myName" /> 
</form> 
<button v-on:click="Send">Click me</button>

new Vue({ 
    data: { 
     myValue: 1 
    }, 
    methods: { 
     Send: function() { 
     this.myValue = 2; 
     this.$refs.myForm.submit(); 
     } 
    } 
})

當我按一下按鈕，它將發送的值：1

我確定該值在表單提交前已修改

來源

2017-08-28 Gary

你不讀以任何方式查詢參數值，以便你在代碼中指定的值將被用來代替。 –

@SamiKuhmonen我不明白你的意見是什麼，輸入將與模型綁定myValue – Gary

是的，它會。然後你發送你的表單，這將導致重新加載頁面，所有內容都將被重置。 –

當您在Vue實例的方法中設置數據屬性的值時，任何與v-model綁定的元素都將不會更新，直到該方法完成。

對於您的情況，當您訪問表單並提交時，綁定輸入未更新爲新值myValue。

要解決這個問題，可以使用Vue.nextTick方法，通過this.$nextTick在每個Vue實例上提供。此方法允許您在Vue實例的模板完成更新後傳遞迴調來執行。

在你的情況，你可以這樣做：

Send: function() { 
    this.myValue = 2; 
    this.$nextTick(() => { 
    this.$refs.myForm.submit(); 
    }); 
}

來源

2017-08-28 13:10:26 thanksd

vue.js表單提交沒有得到模型綁定

回答

相關問題