VueJS : 이미 사용 된 목록 선택 사용 안 함

Question

Vue.js를 배우므로 특정 국가의 세금에 countrycode를 할당하는 작은 목록을 작성하려고합니다. (지루한 일이지만 " 번역 할 수있다 ").

이

내가 선택 목록을 생성하는 방법입니다

<div class = "uk-form-row" v-for="vat in config.vats"> 
    <span class = "uk-form-label">{{vat.countrycode}}</span> 
    <div class = "uk-form-controls uk-form-controls-text"> 
     <p class = "uk-form-controls-condensed"> 
      <span class="uk-align-right"> 
       <button @click="remove(vat)" class="uk-button uk-button-danger"><i class="uk-icon-remove"></i></button> 
      </span>      

      <label class="uk-form-label">{{ 'VAT' | trans }}</label> 
      <div class="uk-form-controls"> 
       <input class="uk-form-small uk-form-width-mini" type="number" v-model="vat.vat" number> {{ 'percent' | trans }}       </div> 
      <label class="uk-form-label">{{ 'Reduced VAT' | trans }}</label> 
      <div class="uk-form-controls"> 
       <input class="uk-form-small uk-form-width-mini" type="number" v-model="vat.reducedvat" number> {{ 'percent' | trans }}       </div> 
     </div>                  
     </p> 
    </div> 
</div> 

: 항목은 이런 식으로 표시됩니다

<form class="uk-width-large-2-3" @submit="add"> 
    <div class = "uk-form-label"> 
    <select class="uk-form-small" v-model="newTax.countrycode"> 
     <option v-for="country in countries" value="{{ $key }}">{{country}}</option>       
    </select> 
    </div> 
    <div class = "uk-form-controls uk-form-controls-text"> 
    <input class="uk-input-large uk-width-1-4" type = "number" placeholder="{{ 'vat' | trans }}" v-model="newTax.vat" number> 
    <input class="uk-input-large uk-width-1-4" type = "number" placeholder="{{ 'reducedvat' | trans }}" v-model="newTax.reducedvat" number> 
    <button class="uk-button" @click="add">{{ 'Add' | trans }}</button> 
    </div> 
</form> 

: 나는 항목을 추가하는 양식을 만든 다음

<select class="uk-form-small" v-model="newTax.countrycode"> 
    <option v-for="country in countries" value="{{ $key }}">{{country}}</option>       
</select> 

이것은 잘 작동합니다.

항목은 저장 및 이동식이며 모든 것이 정상입니다.

하지만 : 이미 정의 된 항목을 회색으로 표시하고 싶습니다. 내가 어떻게 할 수 있니?

내 첫 번째 시도가 작동하지 않습니다

<option v-for = "country in countries" value = "{{ $key }}" :disabled="config.vats.includes($key)">{{country}}</option> 

그것은 더 JS 오류가 발생하지 않습니다하지만 모든 옵션을 사용할 수 있으며 사용 가능. 덤프로

배열과 객체 :이

국가의 내용은 다음과 같습니다

{ "AF": "Afghanistan", "AL": "Albania", "DZ": "Algeria", "AS": "American Samoa", "AD": "Andorra", "AO": "Angola", "AI": "Anguilla", "AQ": "Antarctica", "AG": "Antigua and Barbuda", "AR": "Argentina", "AM": "Armenia", "AW": "Aruba", "AU": "Australia", "AT": "Austria", "AZ": "Azerbaijan", "BS": "Bahamas", "BH": "Bahrain", "BD": "Bangladesh", "BB": "Barbados", "BY": "Belarus", "BE": "Belgium", "BZ": "Belize", "BJ": "Benin", "BM": "Bermuda", "BT": "Bhutan", "BO": "Bolivia", "BA": "Bosnia and Herzegovina", "BW": "Botswana", "BV": "Bouvet Island", "BR": "Brazil", "BQ": "British Antarctic Territory", "IO": "British Indian Ocean Territory", "VG": "British Virgin Islands", "BN": "Brunei", "BG": "Bulgaria", "BF": "Burkina Faso", "BI": "Burundi", "KH": "Cambodia", "CM": "Cameroon", "CA": "Canada", "CT": "Canton and Enderbury Islands", "CV": "Cape Verde", "KY": "Cayman Islands", "CF": "Central African Republic", "TD": "Chad", "CL": "Chile", "CN": "China", "CX": "Christmas Island", "CC": "Cocos [Keeling] Islands", "CO": "Colombia", "KM": "Comoros", "CG": "Congo - Brazzaville", "CD": "Congo - Kinshasa", "CK": "Cook Islands", "CR": "Costa Rica", "HR": "Croatia", "CU": "Cuba", "CY": "Cyprus", "CZ": "Czech Republic", "CI": "Côte d’Ivoire", "DK": "Denmark", "DJ": "Djibouti", "DM": "Dominica", "DO": "Dominican Republic", "NQ": "Dronning Maud Land", "DD": "East Germany", "EC": "Ecuador", "EG": "Egypt", "SV": "El Salvador", "GQ": "Equatorial Guinea", "ER": "Eritrea", "EE": "Estonia", "ET": "Ethiopia", "FK": "Falkland Islands", "FO": "Faroe Islands", "FJ": "Fiji", "FI": "Finland", "FR": "France", "GF": "French Guiana", "PF": "French Polynesia", "TF": "French Southern Territories", "FQ": "French Southern and Antarctic Territories", "GA": "Gabon", "GM": "Gambia", "GE": "Georgia", "DE": "Germany", "GH": "Ghana", "GI": "Gibraltar", "GR": "Greece", "GL": "Greenland", "GD": "Grenada", "GP": "Guadeloupe", "GU": "Guam", "GT": "Guatemala", "GG": "Guernsey", "GN": "Guinea", "GW": "Guinea-Bissau", "GY": "Guyana", "HT": "Haiti", "HM": "Heard Island and McDonald Islands", "HN": "Honduras", "HK": "Hong Kong SAR China", "HU": "Hungary", "IS": "Iceland", "IN": "India", "ID": "Indonesia", "IR": "Iran", "IQ": "Iraq", "IE": "Ireland", "IM": "Isle of Man", "IL": "Israel", "IT": "Italy", "JM": "Jamaica", "JP": "Japan", "JE": "Jersey", "JT": "Johnston Island", "JO": "Jordan", "KZ": "Kazakhstan", "KE": "Kenya", "KI": "Kiribati", "KW": "Kuwait", "KG": "Kyrgyzstan", "LA": "Laos", "LV": "Latvia", "LB": "Lebanon", "LS": "Lesotho", "LR": "Liberia", "LY": "Libya", "LI": "Liechtenstein", "LT": "Lithuania", "LU": "Luxembourg", "MO": "Macau SAR China", "MK": "Macedonia", "MG": "Madagascar", "MW": "Malawi", "MY": "Malaysia", "MV": "Maldives", "ML": "Mali", "MT": "Malta", "MH": "Marshall Islands", "MQ": "Martinique", "MR": "Mauritania", "MU": "Mauritius", "YT": "Mayotte", "FX": "Metropolitan France", "MX": "Mexico", "FM": "Micronesia", "MI": "Midway Islands", "MD": "Moldova", "MC": "Monaco", "MN": "Mongolia", "ME": "Montenegro", "MS": "Montserrat", "MA": "Morocco", "MZ": "Mozambique", "MM": "Myanmar [Burma]", "NA": "Namibia", "NR": "Nauru", "NP": "Nepal", "NL": "Netherlands", "AN": "Netherlands Antilles", "NT": "Neutral Zone", "NC": "New Caledonia", "NZ": "New Zealand", "NI": "Nicaragua", "NE": "Niger", "NG": "Nigeria", "NU": "Niue", "NF": "Norfolk Island", "KP": "North Korea", "VD": "North Vietnam", "MP": "Northern Mariana Islands", "NO": "Norway", "OM": "Oman", "PC": "Pacific Islands Trust Territory", "PK": "Pakistan", "PW": "Palau", "PS": "Palestinian Territories", "PA": "Panama", "PZ": "Panama Canal Zone", "PG": "Papua New Guinea", "PY": "Paraguay", "YD": "People's Democratic Republic of Yemen", "PE": "Peru", "PH": "Philippines", "PN": "Pitcairn Islands", "PL": "Poland", "PT": "Portugal", "PR": "Puerto Rico", "QA": "Qatar", "RO": "Romania", "RU": "Russia", "RW": "Rwanda", "RE": "Réunion", "BL": "Saint Barthélemy", "SH": "Saint Helena", "KN": "Saint Kitts and Nevis", "LC": "Saint Lucia", "MF": "Saint Martin", "PM": "Saint Pierre and Miquelon", "VC": "Saint Vincent and the Grenadines", "WS": "Samoa", "SM": "San Marino", "SA": "Saudi Arabia", "SN": "Senegal", "RS": "Serbia", "CS": "Serbia and Montenegro", "SC": "Seychelles", "SL": "Sierra Leone", "SG": "Singapore", "SK": "Slovakia", "SI": "Slovenia", "SB": "Solomon Islands", "SO": "Somalia", "ZA": "South Africa", "GS": "South Georgia and the South Sandwich Islands", "KR": "South Korea", "ES": "Spain", "LK": "Sri Lanka", "SD": "Sudan", "SR": "Suriname", "SJ": "Svalbard and Jan Mayen", "SZ": "Swaziland", "SE": "Sweden", "CH": "Switzerland", "SY": "Syria", "ST": "São Tomé and Príncipe", "TW": "Taiwan", "TJ": "Tajikistan", "TZ": "Tanzania", "TH": "Thailand", "TL": "Timor-Leste", "TG": "Togo", "TK": "Tokelau", "TO": "Tonga", "TT": "Trinidad and Tobago", "TN": "Tunisia", "TR": "Turkey", "TM": "Turkmenistan", "TC": "Turks and Caicos Islands", "TV": "Tuvalu", "UM": "U.S. Minor Outlying Islands", "PU": "U.S. Miscellaneous Pacific Islands", "VI": "U.S. Virgin Islands", "UG": "Uganda", "UA": "Ukraine", "SU": "Union of Soviet Socialist Republics", "AE": "United Arab Emirates", "GB": "United Kingdom", "US": "United States", "ZZ": "Unknown or Invalid Region", "UY": "Uruguay", "UZ": "Uzbekistan", "VU": "Vanuatu", "VA": "Vatican City", "VE": "Venezuela", "VN": "Vietnam", "WK": "Wake Island", "WF": "Wallis and Futuna", "EH": "Western Sahara", "YE": "Yemen", "ZM": "Zambia", "ZW": "Zimbabwe", "AX": "Åland Islands" } 

config.vats 다른 배열의 포함

이제

[ { "countrycode": "DE", "vat": 19, "reducedvat": 7 }, { "countrycode": "AL", "vat": 5, "reducedvat": 5 } ] 

{{config.vats.includes('DE') | json}} 반환 false을 - 분명히 존재하지 않는 DE 값을 가진 배열 요소를 찾고있는 것 같습니다.

Answer 1

자바 스크립트 .includes()은 다른 문자열 내의 문자열을 검색하지만 config.vats은 배열입니다.

method: { 
    vatMatch: function(code) { 
     return this.config.vats.filter(function(vat) { 
     return vat.countrycode == code; 
     }).length > 0; 
    }, 
}  

다음

당신의 HTML에서 사용 : 다음 $key이 config.vats 배열의 개체 중 하나에 countrycode 재산을 사용할 수있는 경우

먼저 확인하는 방법을 만들

<option v-for = "country in countries" value = "{{ $key }}" 
     :disabled="vatMatch($key)">{{country}} 
</option>