使用相同的表單進行創建和讀取操作

我有一個主組件和一個子組件。子組件保存創建模式的數據以及編輯模式。孩子有一個數據段如下當組件是正在使用創建模式使用相同的表單進行創建和讀取操作

data() { 
      return { 
       title: '', 
       description: '', 
       organizer: '', 
       startdate: '', 
       enddate: '', 
       email: '', 
       phone: '' 
      } 
     },

和我的創造模式是如下

<input type="text" placeholder="enter event title here" class="form-control" v-model="title">

在編輯模式下輸入，我更新在客戶端上的道具值如下，其是

props:['currentevent']

的currentevent的值正在從主部件到子組件傳遞，並且還爲當前的值正在編輯。

因此，處理的輸入值的完整代碼看起來如下

<input type="text" placeholder="enter event title here" class="form-control" v-if="currentevent" :value="currentevent.title"> 

<input type="text" placeholder="enter event title here" class="form-control" v-else v-model="title">

在我保存方法（在子組件），我檢查，如果currentevent爲空。如果它是空的，那麼我觸發添加代碼，否則觸發更新代碼。

問題：這是有效的，但我有一個很大的形式，必須爲每一個組件做這件事都不是一個乾淨的設計。你可以讓我知道我應該做什麼？

來源

2016-12-19 Gagan

我完全讚賞你的困境。處理表單數據的最佳方式是使其創建/更新不可知。下面是我建議你試試：

而是保持所有數據字段的不同屬性，包含他們在一個單一的對象，在這種情況下，我稱它eventObj爲清楚：

data() { 
    return { 
     eventObj: {} 
    } 
}

然後在你標記你通過對象引用它們：

<input type="text" placeholder="..." class="form-control" v-model="eventObj.title">

那麼你需要定義一個道具從父組件的數據傳遞（作爲一個對象），如果您正在編輯：

props: { 
    currentevent: Object 
}

然後你只需要輸入的道具映射到子組件的數據：當你的輸入，比如<input v-model="eventObj.title">處理

created() { 
    Object.assign(this.eventObj, this.currentevent || {}) 
}

現在，如果有保存的標題（中傳遞與currentevent）該字段將被預填充它，否則它將是空白的。

我認爲這應該可以幫助你朝着正確的方向去解決你想要解決的複雜問題。一般來說，這類東西還涉及其他後勤問題，但我不會無人駕駛。 :)

來源

2016-12-19 03:32:58

謝謝@rommel ..它的工作..再次感謝！ :) – Gagan

@Rommel桑托爾，似乎你掌握vue.js.我需要你的幫助。看看這裏：http://stackoverflow.com/questions/41843823/how-to-display-button-link-with-vue-js –

我看到的問題是你想刪除窗體中的v-if/else。我會在這裏推薦的是保持您的本地孩子數據與傳遞的道具同步，並且只使用局部變量形式。

這樣做的一種方式可以放在道具上的觀察者，並且每當道具改變時，更新局部變量並僅在表單中使用這些變量。

watch: { 
    currentevent: function(newVal){ 
     title = newVal.title,\ 
     description = newVal.description 
     ... 
    } 
}

來源

2016-12-19 03:59:55 Saurabh

使用相同的表單進行創建和讀取操作

回答

相關問題