I'm trying to display background image in a component.
If I understand it well, we must use that:
<div class="food-icon"
:title="tooltip"
:style="{backgroundImage: `url(${require(image)})`}">
But I get this error
Error in render: "Error: Cannot find module '../assets/fast-food.jpg'"
I try it with:
<div class="food-icon"
:title="tooltip"
:style="{backgroundImage: `url(${require('../assets/fast-food.jpg')})`}">
And that works well, i don't understand why.
In your first snippet you missed single quotes around image
Try:
url(${require('image')})
Just remember to whatever you wrap inside url(' ') must be quoted to be a valid string.
Related
I'm giving it a try for flowbite-vue and I'm having this eslint unexpected character problem in VS-Code,
[vue/no-parsing-error]
Parsing error: unexpected-character-in-unquoted-attribute-value.eslint-plugin-vue
Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).vue(18)
the component Navbar has a dropdown and the label={Avatar.. is showing this error
<Dropdown
arrowIcon={true}
inline={true}
label={Avatar alt="User settings" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded={true}/>}
>
has anyone came through this and fixed it?
thanks in advance for the help.
You probably meant this in Vue's realm
<Dropdown
arrow-icon
inline
label="Avatar alt='User settings'"
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
rounded
/>
rounded assumes it's actually :rounded="true" but we can make it shorter that way.
Please also notice the semi-colon : which is a shorthand for v-bind:, needed when you need to interpolate what is inside of the double quotes (like an object).
Which is not the case in your situation: you use only strings.
More details available here: https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings
Fairly basic question as I'm going back to webdev after a few years away so experimenting.
I want to create a reusable component that wraps an error message in a formatted element:
I'd call it in my partial as...
<x-error :blah="$woof"/>
The component code would be something like this:
#error('field') "nicely formatted message" #enderror
However, I want to be able to dynamically set the field name within for the error directive, something like:
#error($field) or #error({{ $field }}) "nicely formatted message" #enderror
...while in the executing partial it would be called through something like:
<x-error :field='email'> or <x-error :field='password'> or <x-error :field='description'> or whatever field name you like.
After spending way too long trawling the web for clues I'm starting to suspect this isn't possible.
Is it? If so how do you do it? Any help or clues gratefully received
Cheers!
The answer is embarrassingly simple: leave off the semicolon! The semicolon kinda acts like a pointer to a variable, rather than passing the data directly to the component, so instead of:
<x-error :field="$title" />
It should be :
<x-error field="title" />
In the component you merely call the variable name:
#error($field)
"nicely formatted message"
#enderror
Easy, init?
I've been searching this for a while but can't seem to get it right. I have a basic Nuxt project with the following directory structure (ignore the fun.vue) :
The idea is to be able to navigate to a single post with paths like http://localhost:3000/posts/1
This works, if I manually go to .../posts/1 I get my page defined in _id.vue.
The problem is that, in my index page, I cannot get <NuxtLink> to go to single post pages. I have a basic v-for looping over my fetched posts array, like so:
<template>
<div>
<div v-for="post in posts" :key="post.id">
{{ post.title }}
<NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
</div>
</div>
</template>
I would expect, upon clicking on the 2nd post's link for example, to navigate to posts/2, but instead I get /%60posts/$%7Bpost.id%7D%60. Why isn't the template string converted normally? I've also tried using a computed value with no success, and the Nuxt Routing docs haven't been of much help.
Highly appreciate any help regarding this.
You forgot the semicolon:
:to="`/posts/${post.id}`"
or even better
:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component
As shown here: https://router.vuejs.org/api/#router-link-props
You can use something like this
the ":" in front of it will make it dynamic and you can use template literals
in between those double quotes
<NuxtLink :to="`posts/${post.id}`">Link to post</NuxtLink>
I tried your code in my development environment. You also may forgot to add "/" in front of "posts":
<NuxtLink :to="`/posts/${post.id}`">Link to post</NuxtLink>
If you put your code without "/" in a Nuxt "layout", it adds "posts" iteratively to your "URL" and makes the destination wrong:
http://localhost:3000/posts/posts/2
This happens when you click on post 1 and after to post 2.
Never had this issue before. Go to this website. As you can see, "sss" and "sssss" are put in two divs with class "col-xs-*". They should appear on same row, not sure why it's not working.
your "menuDiv" has float: left and that ruins the flow
either remove that, or add a float to the "mainDiv" as well
as You are using XS-Xtra small , column type it will display as column on XS-devices for general use Use
<div class="col-7">your content
</div>
<div class="col-5">your content
</div>
I am trying to retrieve the text embedded inside the div tag. Partial html code is given below. I consulted the other existing answers, but the tag is located successfully but the text is coming back as empty string.My purpose is to retrieve the string between the 'div' tag as "You entered an invalid username or password, please try again."
I used the xpath
//div[#class='login-card js-login-card']/div[#role='alert']/div[2]
I used the css
.alert__heading.js-alert--error-text
This only getting back the tag name as div, but the text as an empty string.
Any ideas or corrections?
<div class="login-card js-login-card">
<div class="login-page__alert alert alert--error tt js-alert--error" role="alert">
<div class="alert__icon">
<div class="alert__heading js-alert--error-text">You entered an invalid username or password, please try again. </div>
</div>
<div id="cmePageWrapper" class="page-wrapper page-wrapper--card"> </div>
Try following xpath, as the required div tag is child node of div with class 'alert__icon':
//div[#class='login-card js-login-card']/div[#role='alert']/div[1]/div
Let me know, if it works for you.
Maybe you wanna try this
div[class*="error-text"]
If it didn't work try to get text by executing javascript code using this
$$( "div[class*="error-text"]" ).text() OR .val()/.html()
Good luck !
You could use contains with xpath, something like //div[contains(#class, 'error-text' ) ], using findelement will retrieve first element match the criteria. If it still returns empty, it means that the page might have more than one element which match the criteria