vuejsの配列内の要素を切り替える方法

Question

私はVue 2に2つの選択フィールドを持っています。どちらも会社名のレコードとして共通の値を持っています。

companyOptions() { 
    if(this.model.data) 
    { 
     return this.model.data.map(d => ({label: d.name, value: d.id})) 
    } 
}, 

：私はこのような計算された値を持っている

<v-select multiple :options="companyOptions" v-model="selectedCompanies"></v-select> 

：

<v-select :options="companyOptions" v-model="company_name"></v-select> 

および他のためにこのように選択します。私はこのような選択を構築するためにvue-selectコンポーネントを使用しています

モデルデータは、軸を介して入力されます。

ボディーが最初の選択で項目を選択すると、2番目の選択肢のオプションから値を削除する必要があります。誰かが私を導くことができる？私が直面していると思う問題は、誰かが最初の選択肢で項目を選択してから、会社を2番目の選択肢からスライスして取り除くことができますが、誰かが最初の選択肢で別の項目を選択した場合、オプションの;つまり、以前に削除した値を追加して、新しく選択した値を削除する必要があります。

Answer 1

マップする前にリストをフィルタリングしてください。

companyOptions() { 
    if(this.model.data) 
    { 
     return this.model.data 
      .map(d => ({label: d.name, value: d.id})) 
    } 
}, 
filteredCompanyOptions() { 
    if (this.model.data) 
    { 
     return this.model.data 
      .filter(f => f.name !== this.company_name.label) 
      .map(d => ({label: d.name, value: d.id}))    
    } 
} 

そして、あなたのテンプレートで

<v-select multiple :options="filteredCompanyOptions" v-model="selectedCompanies"></v-select> 

注：あなたは誰かが最初の選択でオプションを選択した場合に対処する必要があります、その後、AN第2の選択、その後、ピックのオプションを選択2番目の選択で選択された最初の選択肢のオプション。 company_nameが変更されるたびにselectedCompaniesをクリアしている可能性があります。ここでそれをどうやって行うのかです。

watch:{ 
    company_name(newValue){ 
    if (!this.selectedCompanies.length > 0){ 
     return 
    } 

    const index = this.selectedCompanies.findIndex(v => v.value == newValue.value) 
    if (index >= 0) 
     this.selectedCompanies.splice(index, 1) 
    } 
}