I am working on a NuxtJS project, with BootstrapVue as front-end framework. I am trying to edit the size of an image inserted inside the title of a card, with the following code:
<b-card
bg-variant="primary"
text-variant="white"
img-alt="Image"
img-src="~/assets/images/house.png"
header="The house"
class="text-center position-relative"
>
<b-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</b-card-text>
<b-button variant="primary" class="paragraph stretched-link"
>Click here</b-button
>
</b-card>
Does anyone know if is possible to customize the style of the image through the b-card properties (without CSS)? The documentation did not helped me.
You could use img-height and img-width to provide the image size inside the card, they accepts a string or a number as values :
<b-card
bg-variant="primary"
text-variant="white"
img-alt="Image"
img-src="~/assets/images/house.png"
img-height="200"
img-width="200"
header="The house"
class="text-center position-relative"
>
Related
I have that layout:
<template>
...navigation for all pages..
<h1>content for X??</h1>
<slot />
...footer for all pages...
</template>
For pages/index.vue:
<template>
index is here ok :)
</template>
and pages/about.vue:
<template>
about is here ok :)
</template>
I wish I could render h1 in layout for different pages and not print same text for all.
I know I can move h1 from layout to pages and edit each page.
But there are a lot of content between h1 and slot and I just want to change text.
There would be many ways of achieving what you are asking but the simplest would be the usage of named slots.
In the vue documentation (please take some time digging into it, the amount of deftail and explanation available is very appreciable) :
The <slot> element has a special attribute, name, which can be used to assign a unique ID to different slots so you can determine where content should be rendered.
The process of using named slots in the nuxt layouts is documented in the nuxt layout documentation.
You could create a TitleLayout.vue component in the layouts folder of your nuxt project that would look like this:
<!-- layouts/TitleLayout.vue -->
<template>
<div>
<nav>
<nuxt-link to="/"> index </nuxt-link>
<nuxt-link to="about"> about </nuxt-link>
</nav>
<main>
<h1>
<slot name="heading">
a default title
</slot>
</h1>
<slot/>
</main>
</div>
</template>
and that you could use it like this in your pages/About.vue (or in any other page)
<!-- pages/About.vue -->
<template>
<div>
<NuxtLayout name="with-title">
<template #heading> Hello from the about title </template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eius
rem, sit repellendus reiciendis explicabo? Dolorum totam molestias
adipisci cupiditate distinctio, libero dolorem iusto, quidem esse
excepturi voluptatem repellendus facere.
</NuxtLayout>
</div>
</template>
<script setup>
definePageMeta({
layout: false,
});
</script>
I am trying to retrieve a list of elements from a webpage that contain a specific string. I'm evaluating the XPath using a selenium ISearchContext.FindElement(By.XPath(...)), so the XPath engine is the one supported by the browser.
Below is a minimal sample page created by me, but in a real world scenario I cannot modify the page's structure:
<html lang="en">
<head>
<title></title>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
</ul>
</nav>
<main>
<div class="content">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab deserunt dolore eius est
facere incidunt magni
minus molestiae natus, nesciunt nostrum, officia perspiciatis placeat provident reiciendis saepe sed, sit
voluptates.</p>
<p class="price">1.150<span class="comma">,</span><sup>00</sup> <span class="currency">EUR</span></p>
</div>
<aside>
<p class="price">1.150<span class="comma">,</span><sup>00</sup> <span class="currency">EUR</span></p>
</aside>
<footer>
1<span>.</span>150<span class="comma">,</span><sup>00</sup> <span class="currency">EUR</span>
</footer>
</main>
</body>
</html>
The elements I'm looking for are [p.price, p.price, footer]; basically only the "deepest" elements containing the string 1.150,00 EUR.
If I evaluate the following XPath in Chrome's Developer Tools Console
$x("//*[contains(., '1.150,00 EUR')][contains(ancestor::*, '1.150,00 EUR')][not(contains(child::*, '1.150,00 EUR'))]")
the result I get is [body, div.content, p.price, p.price, footer].
I'm looking for a solution that still lets me remain in the Selenium context so I can further access element properties (such as element position). It doesn't necessarily have to involve XPath and I am also open to using another browser.
//*[contains(., '1.150,00 EUR')]
[not(
*[contains(., '1.150,00 EUR')]
)]
= "all elements whose text value contains '1.150,00 EUR' and don't have a child element whose text value contains '1.150,00 EUR'"
Given that HTML tree, this xpath selects the requested elements
$x("//*[.='EUR']/parent::*[contains(., '1.150,00 EUR')]")
Result
Array(3) [ p.price, p.price, footer ]
I am creating Vue app with vue3 and using the bootstrap-vue3 package for Frontend.
I followed Bootstrap-Vue docs and copied the following code but Carousel doesn't work.
Of course, I can use another package for Carousel, but almost works already was done with this package. So I am looking for a solution to use this package.
Kindly let me know please if you folks how to fix this issue.
<template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template #img>
<img
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://picsum.photos/1024/480/?image=55"
alt="image slot"
>
</template>
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
slide: 0,
sliding: null
}
},
methods: {
onSlideStart(slide) {
this.sliding = true
},
onSlideEnd(slide) {
this.sliding = false
}
}
}
</script>
You need a active prop in any one of the b-carousel-slide tag to display the slide.
It is something not mentioned in the documentation.
I have a q-list with several q-expansion-items as children. The q-expansion-items are assigned to a list, so there is only one open at any given time.
<q-list padding>
<q-expansion-item
id="explore"
group="somegroup"
icon="explore"
label="Explore"
default-opened
#show="switchMode">
<q-card id="explore-card">
<q-card-section id="explore-card-section">
Item one text
</q-card-section>
</q-card>
</q-expansion-item>
<q-expansion-item
id="identity"
group="somegroup"
icon="perm_identity"
label="Identity"
#show="switchMode">
<q-card>
<q-card-section>
Item two text.
</q-card-section>
</q-card>
</q-expansion-item>
</q-list>
I would like to run a Vue method when any q-expansion-item is opened and determine which specific item was opened.
I've tried assigning an id to each q-expansion-item, but need some clunky code to access the ID within the #show event: `
new Vue({
el: '#q-app',
data: function () {
return {}
},
methods: {
switchMode: function (event) {
console.log(event.target.parentElement.parentElement.parentElement.parentElement.id)
}
},
// ...etc
})
I've also tried using the to property to change the URL fragment, but that doesn't update the URL when the item is expanded (it only updates the URL fragment when clicking on the item title).
How can I determine which q-expansion-item in a group is open at any given time?
You can achieve this without using id's and events. You can use v-model instead.
Example -
<q-expansion-item
group="somegroup"
icon="explore" v-model="selected_model['First']"
label="First"
header-class="text-primary"
>
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</q-card-section>
</q-card>
</q-expansion-item>
<q-separator />
<q-expansion-item
group="somegroup"
v-model="selected_model['Second']"
icon="perm_identity"
label="Second"
header-class="text-teal"
>
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</q-card-section>
</q-card>
</q-expansion-item>
data -
data(){
return{
selected_model:{}
}
}
Result-
{ "First": true, "Second": false, "Third": false, "Fourth": false }
Codepen - https://codepen.io/Pratik__007/pen/poymOqm
and if you want First to open default then you can set "First":true in selected_model.
I Am using vuejs for design purpose,I want when i click on login
button it will open my dashboard but i cant do that ,because i am new
to vue js here below my codes
Error in v-on handler: "TypeError: Cannot read property 'CForm' of
null"
vue.esm.js?a026:1897 TypeError: Cannot read property 'CForm' of null
at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0b619c3d-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/pages/Login.vue?vue&type=template&id=07b13bd8&
(34.js:23), :97:73)
at invokeWithErrorHandling (vue.esm.js?a026:1863)
at HTMLButtonElement.invoker (vue.esm.js?a026:2184)
at HTMLButtonElement.original._wrapper (vue.esm.js?a026:7565
)
Login.vue
<template>
<div id="login">
<CContainer class="d-flex content-center min-vh-100">
<CRow>
<CCol>
<CCardGroup>
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<CInput
name:username
placeholder="Username"
autocomplete="usernameemail"
>
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
name:password
placeholder="Password"
type="password"
autocomplete="curent-password"
>
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CRow>
<CCol col="6" class="text-left">
<CButton color="primary" class="px-4" #click="check(this.CForm)">Login</CButton>
</CCol>
<CCol col="6" class="text-right">
<CButton color="link" class="px-0">Forgot password?</CButton>
<CButton color="link" class="d-md-none">Register now!</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard
color="primary"
text-color="white"
class="text-center py-5 d-sm-down-none"
body-wrapper
>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<CButton
color="primary"
class="active mt-3"
>
Register Now!
</CButton>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script type="text/javascript">
export default {
name: 'Login',
methods:{
check(CForm){
if (CForm.username.value=="demon" && CForm.password.value=="pwr") {
window.open("Dashboard.vue")
} else {
alert("wrong email and password")
}
}
}
}
</script>
You cannot open a view with window.open (url).
You can use axios (or similar) to request authentication on your server.
When clicking on the login button: send the login and password with Axios to the server authentication endpoint (for example: www.yourserver / login / connect.php), in POST mode.
Your server will need to authenticate you and return a response. In the view, the answer can be tested in the callback part of the request: a method is provided for this.
If successful : access your dashboard page (window.open ("www.Yourserver / dashboard.php ").
note : the dashboard.php must verify if you are really authorized.
If you use spa logic (single page application). You will use vueroute and probably vuex.js.
I think you need to deepen the concept vue.js / spa application / landing page / vueroute.js / vuex.js / axios (or similar). good luck.