Vue：檢查選中哪個複選框，並根據不同的數據發送，具體取決於

有條件地被另一個複選框禁用的無線電錶單。一個單選按鈕可以發送true：false，另一個單選按鈕可以發送一些數據。Vue：檢查選中哪個複選框，並根據不同的數據發送，具體取決於

我可以做什麼檢查以確定檢查哪個無線電以及如何發送true：false或數據。

<input type="radio" id="one" 
    value="Voicemail" 
    v-bind:disabled="!checked" 
    v-model="checkedValue"> 
    <label for="one">Voicemail</label> 

    <input type="radio" id="two" 
    value="Destination" 
    v-bind:disabled="!checked" 
    v-model="checkedValue"> 

    <label for="two">Destination</label> 
    <input type="text" v-model="destinationNumber" v-bind:disabled="!checked"> 
    <button class="button" type="submit" name="button" v-bind:disabled="!checked">Submit</button> 

data() { 
    return { 
     checked: '', 
     checkedValue: '', 
     destinationNumber: '' 
    } 
}, 
methods: { 
    handleExtensionFormSubmit() { 
    const postData = { 
     destination: this.checkedValue = 'Destination' ? this.destinationNumber : '', 
     voicemail: this.checkedValue = 'Voicemail' ? true : '' 
    } 

this.$http.put(/someUrl)

我的要求應該是這樣的：

destination: 666, 
voicemail: false

或者

destination: '', 
voicemail: true

所有幫助表示讚賞。

來源

2017-03-14 Devin Chaves

您的代碼現在的主要問題是您的發佈對象。

postData = { 
    destination: this.checkedValue = 'Destination' ? this.destinationNumber : '', 
    voicemail: this.checkedValue = 'Voicemail' ? true : '' 
}

this.checkedValue = 'Destination'不檢查任何它被設置的checkedValue價值目標，這將始終爲true。您需要將這兩個更改爲==。此外，如果您想要爲語音郵件返回false，則需要?true:false而不是?true:''。我不確定你的代碼應該做什麼，但這應該讓你走上正確的軌道。

來源

2017-03-14 15:44:48 qw3n

是的，這解決了我的問題。我其實不想發送一個錯誤的值，只是一個空字符串，所以這個工作。謝謝。你有可能知道如何獲得與無線電和輸入相關的動態初始值？用getter計算屬性？但那又如何？ –

https://vuejs.org/v2/guide/forms.html#Radio-1解決了這個問題。您可以將輸入的值綁定到某個變量''。另外，你不需要'v-bind'的額外提示，你只需要'：'https://vuejs.org/v2/guide/syntax.html#v-bind-Shorthand – qw3n

@DevinChaves，如果這回答您的問題，請忘記點擊複選框。 – qw3n

Vue：檢查選中哪個複選框，並根據不同的數據發送，具體取決於

回答

相關問題