I am trying to find a way to activate a button when both of those checkboxes are checked. I've disabled the button but I can't think of a method of actually triggering the isActive when both of them are checked.
<div class="form-check mb-1">
<input
class="form-check-input"
type="checkbox"
id="age"
checked
/>
<label
class="form-check-label"
for="age"
>By clicking this you agree that you
are at least 18 years old.</label
>
</div>
<div class="form-check mb-4">
<input
class="form-check-input"
type="checkbox"
id="terms"
checked
/>
<label
class="form-check-label"
for="terms"
>By clicking this you agree to our
<router-link to="/terms"
>Terms & Conditions</router-link
>
</label>
</div>
<button
:disabled="isActive"
class="btn btn-outline-light btn-lg px-5 mb-1"
type="submit"
>
Register
</button>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
You should do something like
First checkbox
<input class="form-check-input" v-model="checkOne" type="checkbox" id="age" checked />
second checkbox
<input class="form-check-input" v-model="checkTwo" type="checkbox" id="age" checked />
button
<button :disabled="!checkOne || !checkTwo" class="btn btn-outline-light btn-lg px-5 mb-1" type="submit" >
Related
I am using custom page layouts for my nuxt3 app. When user selects a radio option, the URL changes to reflect the change (ie, 'solved', 'unsolved' radio options). This works good, however, the radio buttons are not shown for the checked item. For example, when user presses "solved tickets" radio option, the radio button is not shown for that item. What am I doing wrong?
components/AppFilter.vue
<template>
<section>
<div class="list-group">
<NuxtLink to="/" class="list-group-item list-group-item-action">
<input
class="form-check-input me-1"
type="radio"
name="listGroupRadio"
value="all"
id="firstRadio"
/>
<label class="form-check-label" for="firstRadio"
>All tickets/index page</label
>
</NuxtLink>
<NuxtLink to="/solved" class="list-group-item list-group-item-action">
<input
class="form-check-input me-1"
type="radio"
name="listGroupRadio"
value="solved"
id="secondRadio"
/>
<label class="form-check-label" for="secondRadio">Solved Tickets</label>
</NuxtLink>
<NuxtLink to="/unsolved" class="list-group-item list-group-item-action">
<input
class="form-check-input me-1"
type="radio"
name="listGroupRadio"
value="unsolved"
id="thirdRadio"
/>
<label class="form-check-label" for="thirdRadio"
>Unsolved Tickets</label
>
</NuxtLink>
</div>
{{ picked }}
</section>
</template>
Stackblitz reproduction: https://stackblitz.com/edit/nuxt-starter-dmx5zu?file=components/AppFilter.vue
Pretty funky structure IMO but that one works fine
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const picked = ref([])
const updateRadioAndMove = ({ radio, newPath }) => {
picked.value = radio.target.value
router.push(newPath)
}
</script>
<template>
<section>
<br/>
picked radio button >> {{ picked }}
<br/>
<br/>
<div class="list-group">
<input
#change="updateRadioAndMove({ radio: $event, newPath: '/' })"
class="form-check-input me-1"
type="radio"
name="listGroupRadio"
value="all"
id="firstRadio"
/>
<label class="form-check-label" for="firstRadio"
>All tickets/index page</label
>
<input
#change="updateRadioAndMove({ radio: $event, newPath: '/solved' })"
class="form-check-input me-1"
type="radio"
name="listGroupRadio"
value="solved"
id="secondRadio"
/>
<label class="form-check-label" for="secondRadio">Solved Tickets</label>
<input
#change="updateRadioAndMove({ radio: $event, newPath: 'unsolved' })"
class="form-check-input me-1"
type="radio"
name="listGroupRadio"
value="unsolved"
id="thirdRadio"
/>
<label class="form-check-label" for="thirdRadio"
>Unsolved Tickets</label
>
</div>
</section>
</template>
I have two registration forms ona a page, but I only want to render one by clicking on proper button: 'Contract Form' or 'Company Form'. Should I do it with v-if? In the code below I just copied few lines of the form.
<template>
<div>
<button #click="contract">UMOWA</button>
<button #click="company">FIRMA</button>
<div v-if="contract">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<input id="lastname" v-model="lastName" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
<div v-if="company">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<button type="submit">Zarejestruj się</button>
<input id="lastname" v-model="lastName" type="text" required />
<label for="email">ADRES E-MAIL</label>
<input id="email" v-model="email" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
</div>
</template>
Yes but you will need to add true in the buttons onclick:
<button #click="contract = true">UMOWA</button>
<button #click="company = true">FIRMA</button>
how do i focus input with a button onClick?
<div class="form-group"
v-for="(file, i) in registerData.requiredDocuments"
:key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file"
:name="file.name"
class="form-control-file"
:id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
i was hoping by clicking the 'choose file' button it would trigger the input. I've tried
// the input
<input :ref="file.name" type="file">
// the button
<button #click="$refs.file.name.focus()">Choose File</button>
but what i get is the name is undefined anyone knows how to fix this?
I had similar problem before, Here is how and did it.
<template>
<div>
<div class="form-group" v-for="(file, i) in registerData.requiredDocuments" :key="`file-${i}`">
<label for="npwp" class="text-muted"> {{file.name}} </label>
<input type="file" :ref="'file' + i" :name="file.name" class="form-control-file" :id="file.name"
:accept="file.name === 'Logo' ? `image/png, image/jpg, image/jpeg` : `application/pdf`">
<div class="d-flex">
<button #click.prevent="setFileFocus(i)" class="btn btn-primary" type="button">Choose File</button>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
setFileFocus(index) {
this.$nextTick(function(){
this.$refs[("file" + index)][0].focus()
})
}
}
}
</script>
I called focus on nexttick. Hope my answer will be helpful
I have two modals in my page and I need a way to listen to 'ok' event when pressing ok button on first modal and respond by opening the another modal.
There are no examples in the documentation:
https://bootstrap-vue.js.org/docs/components/modal/
I wanted to use this listener but nothing is explained and I couldn't find out what is what here.
export default {
mounted() {
this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
console.log('Modal is about to be shown', bvEvent, modalId)
})
}
}
This is the relevant part of my code:
<div>
<b-modal id="modal-center-add-post" style="width: 120px" centered class="h-50 d-inline-block min-vw-100" ok-title="next" >
<add-post></add-post>
</b-modal>
</div>
<div>
<b-modal id="modal-center-add-content" style="width: 120px"
centered class="h-50 d-inline-block min-vw-100"
ok-only ok-title="Create" >
<add-content></add-content>
</b-modal>
</div>
and add-post component code is
<template>
<form>
<div class="form-group row">
<label for="title"
class="col-sm-2 col-form-label">
Title
</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="title"
placeholder="Title">
</div>
</div>
<div class="form-group row">
<label for="chooseTopic"
class="col-sm-2 col-form-label">
Topic
</label>
<div class="col-sm-10">
<select id="chooseTopic" class="form-control">
<option selected>Leadership</option>
<option>HR</option>
<option>Sales</option>
<option>Marketing</option>
</select>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0"> Type</legend>
<div class="col-sm-10">
<div class="form-check-inline ">
<label class="form-check-label"
for="video"
:class="{'checked':(isChecked==='video')}"
#click="isChecked='video'">
<input class="form-check-input"
type="radio" name="video"
id="video"
v-model="postingType"
value="video" checked>
<i class="fab fa-youtube "></i>
Video
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label"
for="ebook"
:class="{'checked':(isChecked==='ebook')}"
#click="isChecked='ebook'">
<input class="form-check-input"
type="radio"
name="ebook"
id="ebook"
v-model="postingType"
value="ebook">
<i class="far fa-file-pdf "></i>
Ebook
</label>
</div>
<div class="form-check-inline ">
<label class="form-check-label "
for="article"
:class="{'checked':(isChecked==='article')}"
#click="isChecked='article'">
<input class="form-check-input " type="radio"
name="article" id="article"
v-model="postingType" value="article" >
<i class="fas fa-pen-square "></i>
Article
</label>
</div>
</div>
</div>
</fieldset>
</form>
</template>
<script>
export default {
name: "AddPost",
data(){
return{
postingType:'',
isChecked:'video'
}
},
}
</script>
So when I click on ok (next) in add-post component I want the second modal to pop up.
it's right on the bottom of the documentation under Events
basicly use
#ok="yourOkFn"
I used this Bootstrap 3 code to change radios into buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
It works well in the jsfiddle but in my website the color of buttons are not changed when clicked. It always is like this:
But the submitted value is correct.
I added this code to add .active class manually:
// Change the color of selected radio button
$('label.btn').click(function() {
$(this).parent('.btn-group').children('label.btn').addClass('active');
$(this).removeClass('active');
});
UPDATE:
This code is not needed. You just need to add class 'active' to one of labels initially.
This code works well without any js:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>