[Vue.js] 상세페이지 모달창을 작성,수정이 안되게 하기! disabled vs readonly
2022. 7. 19. 15:05ㆍFront-end
반응형
상세페이지 모달창을 작성,수정이 안되게 하고싶었다.
1. disabled
<el-input v-model="sendMessageInfo.callbackNumber" disabled/>
: disabled 만 추가해주면 작성이 비활성화가 된다.
그런데... 사실 이게 작성을 안하게 하고싶었지 잘 안보고싶었다는 말은 아니였는데...
잘 안보인다. 회색 희꺼멓게 보여서 단순히 작성을 못하는 것에서 더 나아가 비활성화가 되버리는 거라 차이가 있다.
안되겠다... 다른걸 찾아보자!
2. readonly
<el-input v-model="sendMessageInfo.callbackNumber" readonly/>
; disabled 대신 readonly를 사용하니 확실히 잘보인다.
좋았어~!
어? 그런데...
한 녀석이 먹히질 않는다...
<el-radio-group v-model="sendMessageInfo.messageType" readonly>
<el-radio v-for="item in messageType" :key="item.key" :label="item.key">{{ item.name }}</el-radio>
</el-radio-group>
바로 radio... 메시지가 단문인지, 장문인지 선택하는 것을 위해 사용하였던 radio에서 readonly가 안먹힌다...
막 선택이 바뀐다...
이를 우야노!!!!
<el-radio-group v-model="sendMessageInfo.messageType" onclick="return(false)">
<el-radio v-for="item in messageType" :key="item.key" :label="item.key">{{ item.name }}</el-radio>
</el-radio-group>
: onclick="return(false)" 를 사용하였더니 다른 쪽 버튼이 클릭은 되지만 선택이 바뀌지는 않는다.
해결~!
반응형
'Front-end' 카테고리의 다른 글
[HTML] 무기 : 박스모델 안경장착하기! (0) | 2022.09.21 |
---|---|
[HTML] 태그의 2가지 종류 (0) | 2022.09.19 |
[Vue.js] text-align (0) | 2022.07.14 |
[WebStorm] npm install error (0) | 2022.07.12 |
[Vue.js] npm... 너란녀석을 어떻게 한담... (0) | 2022.07.06 |