반응형
값이 null이 아닌 경우 VueJ 표시 버튼
VueJ를 처음 사용하는데 슬롯에 버튼 값이 지정되어 있는지 여부만 표시하기 위한 버튼(슬롯 포함)만 표시할 수 있는 방법이 있는지 궁금합니다.
BootstrapVue Modals를 사용하고 있으며 코드는 다음과 같습니다.
snippet에서 modal을 정상적으로 실행할 수 없었습니다만, 열려 있는 modal의 스크린샷은 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn @click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block @click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block @click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
Vues를 사용하여 조건부로 모든 요소를 렌더링할 수 있습니다.v-if지시:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://vuejs.org/v2/guide/conditional.html
언급URL : https://stackoverflow.com/questions/53184534/vuejs-show-button-when-a-value-is-not-null
반응형
'source' 카테고리의 다른 글
| Nuxt 구성 요소가 업데이트되지 않지만 저장소가 예상대로 업데이트되고 있습니다. (0) | 2022.08.24 |
|---|---|
| Django의 Vue 동적 html 형식 (0) | 2022.08.24 |
| Vue.js Functional 컴포넌트에서 이벤트를 내보내는 방법 (0) | 2022.08.24 |
| vue.js 2를 사용하여 스팬의 텍스트를 변경하는 방법 (0) | 2022.08.24 |
| *, /, +, -, % 연산자를 사용하지 않고 숫자를 3으로 나눕니다. (0) | 2022.08.21 |