[Vue.js] 상세페이지 모달창을 작성,수정이 안되게 하기! disabled vs readonly

상세페이지 모달창을 작성,수정이 안되게 하고싶었다.

 

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)" 를 사용하였더니 다른 쪽 버튼이 클릭은 되지만 선택이 바뀌지는 않는다. 

해결~!