I am trying to display a v-alert conditionally based on whether the payment-successful query parameter is true or false.
Here's what I tried:
<v-alert v-if="$route.query.payment-successful == true" type="success" dismissible>
I'm an alert
</v-alert>
But it does not seem to work since the alert is not being displayed when I set the query param. I also tried putting the $route.query.payment-successful between quotes but it did not work either.
Try out to use [] squared brackets accessor :
<v-alert v-if="$route.query['payment-successful'] == true"></v-alert>
Related
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.
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.
I'm trying to achieve a very basic slide between h2, using vuejs and gsap. I need 2 different types of transitions, based on the direction (next and previous slide). To obtain a compact code, I used the ternary operator ?:
<transition :css="false" #enter="direction ? enterNext : enterPrev">
<h2 :key="currentPage.id">
<NuxtLink
:to="currentPage.to"
:title="currentPage.longTitle"
exact-active-class="is-active"
>
{{ currentPage.title }}
</NuxtLink>
</h2>
</transition>
If I use 2 div with a v-if / v-else syntax, it works well. What am I doing wrong here ? Do I need to format differently what the ternary returns ?
#enter is an event handler. You can pass a function name here like #enter="enterNext" (that's what you probably did before) or valid JS code fragment like #enter="enterNext($event)" (function call)
Your ternary doesn't return anything as it is missing return statement.
Anyway what you probably want is this: #enter="direction ? enterNext() : enterPrev()"
I have several checkboxes that I use for display purposes of 'true' and 'false'. Each one will show me the above warning (I made the warning more generic for the purposes of searching. In reality, it reads #Model.Service_Request_Information.Servicelead, etc, instead of #Model.property)
<input class="custom-control-input" type="checkbox" checked="#item.Servicelead" disabled />
I have read that it is okay to write razor code like this, and the HTML will insert/leave out 'checked' from the attributes depending on the value. It works fantastically for how I want it, and it doesn't prevent my code from compiling. So, any ideas on why I am getting this warning?
Razor will render a boolean attribute if the expression you pass to it evaluates to true. If the expression evaluates to false, the attribute is not rendered at all. That is the Razor feature you are using in your example.
In HTML, valid values for the checked attribute are an empty string or "checked" (Specs) i.e. checked or checked="checked". Visual Studio reports HTML errors as warnings by default, which is what you are seeing. You can either ignore it, turn HTML validation off:
Tools > Options > Text Editor > Html > Validation
Or you can use a ternary expression as demonstrated by other answers:
#(item.Servicelead? "checked" : "")
The checked attribute does not have a value. It should only be set when #item.Servicelead is true.
Use this code instead:
<input class="custom-control-input" type="checkbox" #(item.Servicelead? "checked" : "") disabled />
We are using by.id to reference an element but Protractor is still throwing this message "more than one element found for locator By(css selector, *[id="txt1"])" and it is returning the value of a label when getText() is used. The behaviour seems strange. When we refer to that element from Javascript, the reference seems fine. Appreciate your help in resolving this.
//Code in Protractor, it seems to be referring to a label
var txtEl=element(by.id('txt1'));
//Code in VueJS, where the ID is set to each InputText
//This is the label
<label class="form__label" v-model="form.label" v-show="form.hasOwnProperty('label')">
{{ index }}. {{ form.label }}
</label>
<el-input type="text"
:id="currentField.id"
:placeholder="currentField.isPlaceholderVisible ? currentField.placeholder : ''"
v-model="currentField.value">
</el-input>
//Code in Javascript, works fine, shows the right value
console.log("Value:" + this.$refs.form1["txt1"].value);
Try printing the source code at this time and you will fine out how many elements are in DOM with similar id
Try this one
element(by.css('input[type = "text"]'))
Finally found the answer after frustrating 10 hours of digging through.
Set ":name" for . Don't set ":id". Like this :name="currentField.id"
In Protractor code, use the name to fetch the element. Like this -
var inputtxt=element(by.css("input[name='txt1']"));
Don't use getText(), it behaves weird, return empty. Use inputtxt.getAttribute('value')) where "value" is the underlying field assigned to "v-model"
IMPORTANT - allow the page to load fully by setting browser.sleep(x ms). Else the element gets retrieved multiple times, protractor throws a warning "More than one element is located...."