<div v-if="boughtTicket">
<ion-row>
<ion-col size="3">
<p>ZÓNY</p>
<p>2</p>
</ion-col>
<ion-col size="3">
<p>MINÚT</p>
<p>30</p>
</ion-col>
<ion-col size="6">
<div class="flex justify-content-between">
<div class="ml-3">
<p>ZĽAVNENÝ</p>
<p>0,41€</p>
</div>
<ion-icon #click="BuyTicket" :icon="cartOutline"></ion-icon>
</div>
</ion-col>
</ion-row>
</div>
this is in ionic code and Im trying to make a function that if the button is clicked this whole code is going to be changed to different kind
methods: {
buyTicket() {
if(this.buyTicket = )
}
}
this is my method. How can I finish the code please
Related
Im doing a little blog project to practice vue.js. Im using composition API script setup. When you write a post it saves in localStorage. When you click on the text in the blog it opens up an overlay and a big sized blogtext. its just that its not only showing the one I clicked on but the other earlier blog posts aswell. How can I focus so it only shows the one I click on. Im using tailwind as css.
On this link you can test yourself but here I have some dummytext in before I made it so the note.text will be shown; https://unique-sprinkles-d1a6cd.netlify.app/
<template>
<div v-if="showModal" #click="showModal = false" class="absolute w-screen h-screen bg-black opacity-75 z-10 flex cursor-pointer items-center justify-center">
<div v-for="note in notes" :key="note.id" class="bg-white hover:border-red-400 p-4 rounded-full text-2xl font-bold"><p>{{ note.text }}</p></div>
</div>
<div class="w-6/12 text-center m-auto">
<h1 class="text-4xl font-bold text-indigo-500 m-5">Blog Posts</h1>
<div class="border-2 border-slate-100 rounded-3xl hover:border-red-400" v-for="note in notes" :key="note.id" >
<div class="relative flex flex-col m-0 justify-around cursor-pointer">
<button class="absolute top-0 right-0 w-5 h-5 cursor-pointer rounded-full hover:bg-red-400 p-2.5" #click="deleteBtn(note)">x</button>
<img class="w-24 h-24 p-3.5 rounded-full" :src="note.img">
<p class="text-xs text-right pr-3.5"> {{ note.writer }}</p>
<p class="text-lg font-bold"> {{ note.headline }}</p>
<p #click="showModal = true" class="text-left p-3.5 text-sm"> {{ note.text }}</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const notes = ref([]);
notes.value = JSON.parse(localStorage.getItem('notes'));
function deleteBtn(note){
notes.value.splice(notes.value.indexOf(note), 1);
localStorage.setItem('notes', JSON.stringify(notes.value));
notes.value = JSON.parse(localStorage.getItem('notes'));
console.log(notes.value)
}
const showModal = ref(false)
</script>
after changes it looks like this; How can I make the empty squares dissapear and also the opacity to 0 in the white textarea so no text from the behind shows. Ive tried tailwind opacity functions but doesnt work.
Here's a method you can use for conditional rendering.
When dealing with v-loops without using a child component, you can use index in the loop then conditionally render it with v-if="selectedIndex = index.
In the modal section, you add the v-if like this
<div
v-if="showModal"
#click="showModal = false"
class="absolute w-screen h-screen bg-black opacity-75 z-10 flex cursor-pointer items-center justify-center"
>
<div
v-for="(note, index) in notes"
:key="note.id"
class="bg-white hover:border-red-400 p-4 rounded-full text-2xl font-bold"
>
<p v-if="selectedIndex === index">{{ note.text }}</p>
</div>
</div>
then in the place where you rendered the text to be clicked, you add a click event to update selectedIndex when you click on different rendered contents with their relevant index.
<div
v-for="(note, index) in notes"
:key="note.id"
class="border-2 border-slate-100 rounded-3xl hover:border-red-400"
#click="selectedIndex = index"
>
<div
class="relative flex flex-col m-0 justify-around cursor-pointer"
>
...
</div>
</div>
then in the script tag, just add a ref of the selectedIndex
const selectedIndex = ref(null)
Note:
If your #click="showModal = true" is faster than the selectedIndex update, you will get a "delayed" update. To fix this you want to convert the #click="showModal = true" into a function, which includes the updateIndex and this showModal reassigning.
It would look something like this
<template>
// other parts...
<p #click="updateValues(index)" class="text-left p-3.5 text-sm"> {{ note.text }}</p>
// other parts...
</template>
<script setup>
// ... your other functions above
const updateValues = (index) => {
selectedIndex.value = index
showModal.value = true
}
</script>
Anyhow, I think it would be better to split those 2 items (the modal and the render text) into different components, that way you will be able to have an easier time handling the logic.
I just started learning Vue2.
I use bootstrap accordion.
I want to be able to click the 'hello button' without triggering the 'collapse' event.
How to do this?
<template>
<div class="accordion" id="accordionExample">
<div class="accordion-item" v-for="i in 3" :key="i">
<h2 class="accordion-header" :id="`headingOne${i}`">
<button class="accordion-button"
type="button" data-bs-toggle="collapse"
:data-bs-target="`#collapseOne${1}`"
aria-expanded="true"
:aria-controls="`collapseOne${1}`"
>
Accordion Item #{{ i }}
<button class="btn-primary" #click=test>hello button</button>
</button>
</h2>
<div :id="`collapseOne${i}`" class="accordion-collapse show"
:aria-labelledby="`headingOne${i}`">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Learn',
methods: {
test () {
console.log('hello')
}
}
}
</script>
You have to make sure that your hello-button is not nested inside the accordion-button. Just put both buttons right next to eachother. You might have to adjust the css to position them properly.
<template>
<div class="accordion" id="accordionExample">
<div class="accordion-item" v-for="i in 3" :key="i">
<h2 class="accordion-header" :id="`headingOne${i}`">
<button class="accordion-button"
type="button" data-bs-toggle="collapse"
:data-bs-target="`#collapseOne${1}`"
aria-expanded="true"
:aria-controls="`collapseOne${1}`"
>
Accordion Item #{{ i }}
</button>
<button class="btn-primary" #click=test>hello button</button>
</h2>
<div :id="`collapseOne${i}`" class="accordion-collapse show"
:aria-labelledby="`headingOne${i}`">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Learn',
methods: {
test () {
console.log('hello')
}
}
}
</script>
In my blazor webassembly app, I'm using bulma dropdown component and I have Log out button inside togglable dropdown content.
Here is the html of my Log out button.
<div id="userMenu" class="dropdown is-right #(UserMenuCollapsed ? "is-active" : null)" #onclick="ToggleUserMenu" #onfocusout="FocusOutHandler">
<div class="dropdown-trigger p-1">
<button class="bg-green-300 rounded-full h-10 w-10 flex items-center justify-center border-none cursor-pointer" aria-haspopup="true" aria-controls="user-menu">AR</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<NavLink href="/profile" Match="NavLinkMatch.All" class="dropdown-item">
Profile (#context.User.Identity.Name)
</NavLink>
<hr class="dropdown-divider">
<button class="dropdown-item" #onclick="BeginSignOut">Log out</button>
</div>
</div>
</div>
This piece of html get displayed when I click #userMenu div element. Now when I click Log out button nothing happens.
On googling I found like sometime changing #onclick to #onmousedown will make click action to work. I changed and it got worked. But not sure why. Please can anyone explain what happens under the hood?
Update 1:
After reading #Umair comments, I have tried to use event stop propagation but that doesn't seem to work.
Here is the updated code:
<div id="userMenu" class="dropdown is-right #(UserMenuCollapsed ? "is-active" : null)" #onclick="ToggleUserMenu" #onfocusout="FocusOutHandler">
<div class="dropdown-trigger p-1">
<button class="bg-green-300 rounded-full h-10 w-10 flex items-center justify-center border-none cursor-pointer" aria-haspopup="true" aria-controls="user-menu">AR</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<NavLink href="/profile" Match="NavLinkMatch.All" class="dropdown-item">
Profile (#context.User.Identity.Name)
</NavLink>
<hr class="dropdown-divider">
<button class="dropdown-item" #onclick="BeginSignOut" #onclick:stopPropagation="stopPropagation">Log out</button>
</div>
</div>
</div>
#code {
private bool stopPropagation = false;
}
I'm trying to build something like the questions in OkayCupid, but all the questions - which are different forms - are located on the same component.
I use an object of questions and 3 possible answers for each question, and I use v-for to loop through the object and create cards with a question, 3 answers with radios, and a submit button.
The problem is that I want to get not only the answer the user chooses, but also the question it belongs to.
Here is my form in the template:
<div class="container">
<div class="row">
<div
class="col-lg-3 col-md-4 col-6"
v-for="(question,index) in questionCollection"
:key="index"
>
<form class="form">
<div class="img-fluid img-thumbnail shadow-lg p-3 mb-5 bg-white rounded">
<!-- <input type="text" :value="question.question" v-model="q" /> -->
<h3 class="d-block mb-4 h-100" alt data-holder-rendered="true">{{ question.question }}</h3>
<div class="card-body container">
<div class="card-text form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="a1"
:value="question.answer1"
v-model="answer"
/>
<h4 class="font-weight-light" for="a1">{{ question.answer1 }}</h4>
</div>
<div class="card-text form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="a2"
:value="question.answer2"
v-model="answer"
/>
<h4 class="font-weight-light" for="a2">{{ question.answer2 }}</h4>
</div>
<div class="card-text form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="a3"
:value="question.answer3"
v-model="answer"
/>
<h4 class="font-weight-light" for="a3">{{ question.answer3 }}</h4>
</div>
</div>
<div class="card-text container">
<small class="text-muted">{{ question.user }}</small>
<button
href="#"
class="btn btn-primary my-3 mx-10 btn float-right shadow-sm rounded"
#click.prevent="answerQuestion"
>Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
And the script:
export default {
name: "questions",
data() {
return {
q: null,
answer: null
};
},
}
As you can see, at the beginning of the form, I tried to get the question element using v-model in a "fake" input, but it gives me an error that it's conflicted with the v-bind of the value (the question) I want to grab. Of course, I can't use v-model on the headline itself because Vue allows to use it only on inputs.
I've tried to change the v-model into v-model="questionCollection[index].question, but then I have no idea how to get it in the script and, let's say, log it to the console with the corresponding answer.
One way to handle this is to submit the question and answer together in the Save button's click-handler. That is, change answerQuestion() to receive question (the iterator variable in v-for) and answer, and update the Save button's click handler in the template to pass those two variables:
// template
<div v-for="(question, index) in questionCollection">
...
<button #click.prevent="answerQuestion(question, answer)">Save</button>
</div>
// script
answerQuestion(question, answer) {
console.log({ question, answer })
}
demo
I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?
Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;
In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}
try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();