Vue.js：嘗試使用Array.push爲一個V模型提供多個輸入

我有一個模型爲「job」的MongoDB/Express服務器。這項工作包含一個字段「資格」，這是一個字符串數組。Vue.js：嘗試使用Array.push爲一個V模型提供多個輸入

我現在有一個Vue.js應用程序，它應該執行基本的CRUD功能。所以我有一個JobAdd.vue，在那裏我有一個表格，有多個標題，薪水輸入，無論如何。現在我在我的模型中有所謂的「資格」字段，所以在我的表格中，我想要爲資格字段輸入多個輸入。但是V型不允許像v-model="job.qualification[]"。

這是我目前的應用程序：https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobAdd.vue

所以我試過如下：

<div v-for="qual in qualification"> 
    <input v-model="qual.text"> 
    </div> 
    <button @click="addQualification"> 
    New Qualification 
</button> 

addQualification() { 
    this.qualification.push({ text: '' }); 
    this.job.qualifications = this.qualification; 
},

我現在在我的客戶端數據結構如下：

{ 
    "job": { 
    "qualifications": [ 
     { 
     "text": "You should do that" 
     }, 
     { 
     "text": "And have that" 
     }, 
     { 
     "text": "Lorem Ipsum" 
     } 
    ], 
    "maxSalary": "1200", 
    "title": "Test Title", 
    "salary": "1234" 
    }, 
}

第一個問題我方法：我需要像這樣構建的job.qualification（http://t2w-api.herokuapp.com/jobs）而不是一個對象。

但我需要的是以下表示： http://t2w-api.herokuapp.com/jobs

這將呈現爲：https://www.team2work.at/#/jobs/57d29740f9c4f703000eec2d

而且它什麼也不做，當我把我的方法addJob形式（on.submit）：

addJob: function() { 
    this.job.qualifications = this.qualification; 
    this.$http.post('http://localhost:9001/jobs/', this.job).then(response => { 
     console.log(response); 
    }, response => { 
     console.log(response); 
    }); 
    } 
},

這裏的任何解決方案？有人指出"You are binding v-model directly to a v-for iteration alias"，但我認爲它不能解決我的問題。

這是我的大項目（快遞/把手），我現在轉換爲Vue.js：https://gist.github.com/markusdanek/dcfadf554a4a99549d3d232c52b84e2c

應該做同樣的:-)

來源

2017-05-11 mrks

http://stackoverflow.com/questions/42629509/you-are-binding-v-model-directly-to-av-for-iteration-alias –

更新我的問題，我不認爲這是一個副本。 – mrks

@mrks你需要一個額外的輸入和一個新的模型來獲取新的資格值 – aletzo

如果你想資格是一個數組當您提交它時，只需將您的資格映射到您要求的格式即可。

let job = Object.assign({}, this.job) 
job.qualifications = this.qualification.map(q => q.text) 

this.$http.post("...", job) 
...

你也可以刪除這條線，因爲如果你採取這種方法似乎無關緊要。

addQualification() { 
    this.qualification.push({ text: '' }); 
    //this.job.qualifications = this.qualification; 
},

來源

2017-05-11 18:11:07 Bert

獲取：TypeError：無法讀取未定義的屬性'map'。 https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobAdd.vue – mrks

@mrks我加了複數。只需使用'this.qualification.map'。我會解決答案。 – Bert

看起來不錯！ :-) http://t2w-api.herokuapp.com/jobs/5914ae6a19fc6d7185335ae5 – mrks

Vue.js：嘗試使用Array.push爲一個V模型提供多個輸入

回答

相關問題