参考：https://www.jb51.net/article/147917.htm
考え
まず、チェックボックスをチェックし、対応するタグが表示されます。
1.時計モニタの使用は、値A（配列）に結合したチェックボックスを変更し、
前記チェックIDの名前に対応するボックス、IDと新しいオブジェクト名の対応する形成を確認取得する周期の変化アレイ;
前記工程で得られたオブジェクトの配列、重量に（製品の要件、タグが重複して表示されません）Bた結果、
Bに割り当てられた前記タグ、それを介してサイクル。
第二に、現在のタグを削除し、タグの[削除]ボタンをクリックして、対応するチェックボックスをチェックを外し点検：
;タグは、現在の上記IDのC取得するときにボタンを1クリックして、タグを除去する
; 2.実行メソッドがCでAを取り除くための
方法の再入力最初のステップに3.watchイベントを、
概要：、機種Aに対応するチェックボックスを聴くAの変化に応じて、表示用のタグに割り当てられたIDに対応する名前をとり、タグ削除イベントは、Aの変更を制御するために、今度は、この方法で時計イベントを再入力してください
上記の考え方に対応したコード、再訪ピットの後ろに遭遇した問題について話をし、おそらく単純で、明確な思考を鳴らし
<EL-行タイプ= "フレックス"正当化= "間">
<EL-COL：スパン= "24">
<！ -タグ展示区- >
<EL-行>
<EL-タグクラス= "tagClass" V-ため= "（タグ、インデックス）タグで"キー= "インデックス"閉鎖可能近い@ = "handleClose（タグ）"：タイプ= "tag.id"サイズ= "ミニ">
{{}} tag.name
</ EL-タグ>
<EL-ボタンV-IF = "tags.length> 0" @クリック= "ClearAllを"プレーンサイズ= "ミニ">全部删除</ EL-ボタン>
</ EL-行>
<！ -表单- >
<EL-形式：モデル= "tempForm" REF = "tempForms"クラス= "choose_tag">
<Pクラス= "tag_title">选择标签</ P>
<！ -多选人员- >
<エル・チェックボックス・グループV-モデル= "ミニ"> = "tempForm.checkboxGroup5"サイズ
<EL-チェックボックスのボーダー= V-用"チェックボックスに（アイテム、インデックス）" @ =に変更"perChange（アイテム）"：ラベル= "item.id"：キー= "インデックス"> {{item.name}} </ EL-チェックボックス>
</ EL-チェックボックス群>
</ EL-形態>
</ EL-COL>
</ EL-行>
輸出のデフォルト{
データ（）{
リターン{
タグ：[]、
tempForm：{
checkboxGroup5：[]、選択された人員@
}、
detailData：[]、
チェックボックス：[{
名： '赤'、
ID： '101'
}、
{
名： '黄' 、
ID： '100'
}、{
名： 'ボブ'、
ID： '102'
}、{
名： 'ボブ'、
ID： '102'
}]
}
}、
方法：{
ClearAllを（）{//すべてクリアデータ
this.tags = []
this.tempForm.checkboxGroup5 = []
}、
perChange（アイテム）{
this.detailData.push（項目）
}、
handleClose（タグ）{//タグを削除イベント
//は削除する現在のタグを削除し
てみましょうyourChoseTags = this.tempForm.checkboxGroup5
this.tempForm.checkboxGroup5 = yourChoseTags.filter（項目=> {
IF（tag.id！==項目）{
trueに復帰
}
}）
}、
delRepeat（ ARR）{//再ための配列オブジェクト
戻りObject.values（
arr.reduce（（OBJ、NEXT）=> {
VARキー= JSON.stringify（次へ）;
）次に=リターン（OBJ [キー]、OBJ;
} {}）
）;
}、
moreArr（）{
yourChose = this.tempForm.checkboxGroup5せ
tempTagsは= []せ
tempTags = this.baseDataDetail（yourChose、this.checkBox、tempTags）
this.detailData = tempTags
}、
包装のbaseDataDetail（yourChose、baseData、コールバック）{//アレイ法
LETコールバック= TEMP
チェックボックスの選択された初期データIDに対応する//データを取得する2サイクル
yourChose.forEach（項目=> {
baseData.forEach（itemSecond => {
IF（項目=== itemSecond.id）{
temp.push （itemSecond）
}
}）
}）
戻りTEMP
}
}、
時計：{
detailData（）{
せtempArr = Object.assign（[]、this.detailData）
tempArr = this.delRepeat（tempArr）
//はconsole.log（tempArr）
this.tags = tempArr
}、
"tempForm.checkboxGroup5"（ ）{
this.moreArr（）
}
}
}
</ SCRIPT>
これは注目すべきポイントです。
1.最後にtempForm.checkboxGroup5イベントリスニングの値を結合マルチボックスマイ方法は、リピートデータであるかもしれない（名前とIDが重複）、この配列が別の配列に重複したデータオブジェクトを含む割り当てますdetailDataは、この配列内の時計を聞いて、ディスプレイのためのタグへの完全な再割り当ての後に行きます。
現在のページのチェックボックスに加えて、我々のニーズは、detailDataを指すことができ、チャネルは最終結果から選択された人そうに関係なく人材、会社全体の部品だけでなく、選択肢を選択するので、なぜそれをやった、保証レンダリング正しいです
2.再配列オブジェクトに、チェックボックス結合モデルは、IDの値が重複しないが、名前IDの使用は、かかる時間に対応する場合であっても、オブジェクト（ボブ）と同じ名前の重初期データIDがあってもよいです、または重複して表示されることがあり、そのようなタグの数を検出します
ので、このメソッドを使用し、あなたが最終的に処理されたデータが繰り返されないことを保証することができ、タグは同じの多くを表示しません、
しかし、アプローチはやや柔軟性に欠けるところですつまり、あなたが対処しなければならないデータ（{ID：1、名称： 「 ボブ」、種類：今}）必須のID、名前、タイプ繰り返し時間は、デエンファシスであろう
拡大：あなたに応じて設定オブジェクトの配列であることができますダイナミックな重複排除の不動産
3.私は、このチェックにまだあるかどうかわからないときは、同時に現在選択されているの名前とIDを取得することができます変更イベントが、しかし、変化するため、変更のチェックボックスのイベントでプレゼンテーションロジックのタグを行うために始めました未確認では、このようなタグの表示が問題になります。