I'm using Vue.js 2 and I'm trying to create a link that should send me to another page. This is what I have:
<div v-for="u in myList">
<router-link :to="'/type/' + u.name"><a>{{u.name}}</a></router-link>
</div>
The above piece of code works but now I would like to pass a parameter (u.weight for example ) along with this link.
I took a look at query parameters but I don't want the user to see this in the address bar type/productname/?queryparamshere.
Is there a way to hide query params, or should I consider another way in order to achieve this?
Related
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 want some help in Vuejs - b progress bar.
I have some value that i get from api (for example : {{data.number}} which has 20), how can i add to the b-progress bar in vuejs to show the bar progress.
I have an example of code, but it is not working:
<b-progress
:value="{{ data.number }}"
variant="success"
striped
:animated="animate"
>
</b-progress>
I am not getting the value(20) in the value field, please assist. thank you
You can first check what you are getting in console by
console.log(data.number)
If your sure what your getting from data.number then you can simply do this:
<b-progress
:value="data.number"
variant="success"
striped
:animated="animate"
>
</b-progress>
you shouldn't use the mustache, rather just say data.number.
I have a route that is built which properly appends #fans at the end of the link...
http://localhost:3000/.../community#fans
I also have id set for fans in the below code (third line)
1) Even though the link is properly filled when a button is clicked (the address in the address bar is the address as shown above), it does not actually go to the part of the page with id fans.
2) But if I go to http://localhost:3000/.../community first and then type #fans at the end of the link, that works. If i remove the id, #fans does not work so I think the code below is fine.
Given #2, I don't understand why #1 is an issue especially since the link that works is the same link that gets generated for the button. Is there a reason why it would work when manually entering the id tag but not when generated?
<panelWithTopTitleAndOptionalTopButton
class="panelWithCards our-fans"
id="fans"
:class="{ hasNoCards: !fans || !fans.length }"
:name="fansTitle"
v-if="!!fansTitle">
<transition-group name="list" tag="div">
<memberCard class="card fan"
v-for="fan in fans"
v-if="!!fan"
:card="fan"
#delete-member="onDeleteMemberPosition"
type="fans"
:key="fan.key" />
</transition-group>
<div
v-if="showLoadMoreButton"
class="load-more"
#click="loadMore"
>LOAD MORE</div>
</panelWithTopTitleAndOptionalTopButton>
We want to add custom fields that can be modified on the back end, yet also populate on the front end using custom fields. We have tried following, yet the fields didn't populate on the front end. See below for examples of the code and corresponding output:
Example Code
Result
How can we get these fields to properly populate on the front end?
I would start by reading the BigCommerce Stencil Documentation. The way you are calling the custom field values is not how they suggest calling these values.
The custom_fields are only accessible on the product detail page at this time in Stencil.
To display them on the product detail page, you can loop through each custom_field value with the following code.
{{#each product.custom_fields}}
<dt class="productView-info-name">{{name}}:</dt>
<dd class="productView-info-value">{{{value}}}</dd>
{{/each}}
You can check to see what values are available on each page by either reading the Stencil docs linked above, or debugging your page by removing the closing '/' and adding '?debug=bar' to the end of your localhost URL. Refresh your page and you will see all available store data in JSON format below the rendered page.
For more control over which custom field you output where you can create a reusable loop.
i.e. Create templates/components/products/custom-fields.html
{{#each product.custom_fields}}
{{#if name '===' ../custom_field}}
{{{value}}}
{{/if}}
{{/each}}
Then from your product_view.html you can specify the field value to output with a single line:
{{> components/products/custom-field custom_fields='custom field name'}}
I am doing something wrong, that much I know. :) I am trying to display a simple breadcrumb on a page. I have this in a view:
#if (ViewContext.RouteData.Values["Action"].ToString() == "Index")
{
<li>
// This displays "Matter"
#ViewContext.RouteData.Values["Controller"]
</li>
}
else
{
<li>
// This displays a hyperlink "Matter",
// but the Href goes to "MyApp/Matter/Matter"
<a href="#ViewContext.RouteData.Values["Controller"].ToString()">
#ViewContext.RouteData.Values["Controller"]
</a>
</li>
}
In the above scenario, I have my Route.cs file set up to be "MyApp/Matter" which corresponds to an "Index" action on my "MatterController".
Clicking the link brings you to "MyApp/Matter/Matter" which does not work.
Any thoughts on how I can get this to work?
You're setting a relative path in the anchor tag. It's evaluating to:
Matter
That (Matter) gets appended to your current URL which, in this case, I can only assume is "MyApp/Matter". The result is "MyApp/Matter/Matter".
You need to specify an absolute URL or a more complete relative URL -- ../Matter would work in this case.
Beyond that, I can't help you without understanding a little more about what you're trying to do.
Where do you want the breadcrumb to take them? What's in the breadcrumb in relation to what they're looking at?
Is MyApp in your example the directory that contains the app or is it an area within your application?
I can only gather that Matter is the controller, but what's the action? If you're getting a link displayed then it's not currently looking at the Index action.