vue中select繫結多個值及資料回顯

距離上篇文章已經快九個月了，我是不是墮落了。。 這篇文章主要是記錄我在專案中遇到的一個小問題，其實說小也不小，在去年剛接觸vue的時候，對於select如何繫結多個值這個問題一度讓我不知所措。剛開始完全沒接觸過vue和elementUI直接上手，跟著element貼上複製官網寫著還挺順利，突然某天后臺需要在select選中時讓我多傳個值，我不知道怎麼辦了，官網上例子是下面這樣的：

v-model只能是value的值，我完全被官網的例子限制住了（怪我太蠢）。

 1.拼接value

後來在群裡問了問，說是可以改成這樣的:value="item.value+item.label",想來大家應該也懂這個意思，為了在傳值的時候更方便，可以把它改成這樣:value="item.value+'/'+item.label"，之後就可以很方便的這樣value.split('/')[0]取值了。 

2.繫結索引

還有一種方法就是不繫結具體的值，而是去繫結索引值:value="index"，在獲取值的時候可以這樣獲取options[index].value.具體例子在這裡

3.資料回顯

以上兩種方法都可以很好的解決select繫結多值的問題，但是我們不妨多想一點，在新增操作的時候可以這樣，那麼編輯的時候怎麼回顯呢？select會根據繫結值與某個option的value值是否相同來判斷是否選中，在上述兩個方法中，我們不可能為了這麼一個操作讓後臺在資料庫中多存一個拼接好的value或者一個索引，想必後臺同學也不會願意的。對於第一種方式，回顯時只需要將從後臺獲取的資料拼接在一起就行，對於第二種方式，需要去進行迴圈對比，找出對應的索引值,然後進行賦值，具體程式碼在這裡。

 4.總結

這雖然是個挺常見的問題，但對於當時的我來說是個不小的問題，現在公司專案不那麼急，抽空記錄一下。這只是我自己的想法，如果您有更好的方法，不妨分享一下。