선택한 기본값이 Vue.js에서 작동하지 않음

선택한 기본값이 Vue.js에서 작동하지 않음

내 드롭다운 목록에 대해 선택한 기본값을 설정하려고 한다.내 코드는 이렇게 생겼어:

        <select v-model="newSelectedUnit" @change="selectUnit(newSelectedUnit)" class="custom-select">
          <option v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == Selectedunit.id">{{ unit.name }}</option>
        </select>

기본값이 선택되어 있지 않다.나는 이미 하드코드를 하려고 했다.Selectedunit.id로32712(단위 ID 중 하나):

            <select v-model="newSelectedUnit" @change="selectUnit(newSelectedUnit)" class="custom-select">
              <option  v-for="unit in units" :key="unit.id" :value="unit.id" :selected="unit.id == 32712">{{ unit.name }}</option>
            </select>

크롬 검사기에는<option>의 가치가 있는 꼬리표를 붙이다32712:

<option value="32712">CYLINDER</option>

기본적으로 선택되지 않는다.

편집: 에 문제가 있다는 것을 알았다.selected습작의위의 예에서 다른 속성을 설정할 경우: :selectedXXX="unit.id == 32712" 크롬 개발 도구에 예상되는 속성이 있음:

<option selectedXXX="true" value="32712">CYLINDER</option>

편집2: 제거하면v-model="newSelectedUnit"선택한 값이 올바르게 설정되었어!하지만 왜?

" 중 하나를 사용하십시오.@change그리고:selected" 또는 "v-model" 그러나 둘 다 아니다.

이제 더v-model에 관하여<select>다음 값을 기준으로 단위를 선택하려고 할 때newSelectedUnit

v-model 식의 초기 값이 옵션과 일치하지 않으면 요소가 "선택되지 않은" 상태로 렌더링된다.

https://vuejs.org/v2/guide/forms.html#Select

css 템플릿을 구체화하려면

select { display:none }

기본 앱 css에 추가

select: { display: block }

다시 나타날 거야!

참조URL: https://stackoverflow.com/questions/52634470/default-selected-value-not-working-in-vue-js