I'm building a nuxt onepager that is feeded with content from the Wordpress Rest Api.
I'm already getting the Wordpress menu structure and every menu item is stored in {{ item.title }}. To scroll later to the requested div with it's id {{ item.title }} i want to complete the {{ item.title }} with a #.
My idea so far is:
<nuxt-link to="'#'{item.title}'" exact class="nav-link">{{ item.title }}</nuxt-link>
You could bind it as follows :
<nuxt-link :to="'#'+item.title" exact class="nav-link">{{ item.title }}</nuxt-link>
Related
In my web application I use the same url several times with other anchors. Is it possible to somehow "store" the baseurl somewhere?
My code looks like:
<a
class="link"
href="https://google.com/same/index.html#ancor"
target="_blank">
{{ $t("labelLearnMore") }}
</a>
https://google.com is always the same, can I shorten this somehow in vue that the code looks cleaner?
Thank you in advance!
Instead of the a tag, use the router-link provided by vue-router.
The code will be:
<router-link
to="/same/index.html#ancor"
target='_blank'
/>
For more informations take a look to the documentation
<a
class="link"
:href="baseUrl + '/same/index.html#ancor'"
target="_blank">
{{ $t("labelLearnMore") }}
</a>
or es2015
<a
class="link"
:href="`${baseUrl}/same/index.html#ancor`"
target="_blank">
{{ $t("labelLearnMore") }}
</a>
set baseUrl in your vue data
Right now I have data being returned from an API that is structured like the following
{_ids: "690506", _addresses: "987394", _bids: "709395", _sids: "384130"}
<ul>
{{Intl.NumberFormat("en-US").format(DataCounts._ids)}}
Location Records
</ul>
<ul>
<v-icon>{{ mdiArch }}</v-icon>
{{Intl.NumberFormat("en-US").format(DataCounts._addresses)}}
Location Records
</ul>
<ul>
<v-icon>{{ mdiArch }}</v-icon>
{{Intl.NumberFormat("en-US").format(DataCounts._bids)}}
Location Records
</ul>
etc.....
Is there a more compartmentalized way to structure this in the UI so when/if the API changes I do not have to go and check 30 lines of code to make sure it works.
you can use vue filters
https://v2.vuejs.org/v2/guide/filters.html
// create global filter
const mySpecialFormat = Intl.NumberFormat("en-US");
Vue.filter('numberFormatEn', function (value) {
if (!value) return ''
return mySpecialFormat.format(value.toString())
})
// then use it somewhere
{{ DataCounts._ids | numberFormatEn }}
or something along those lines
EDIT: Or did you mean how to simplify Object(k,v) -> html(ul)
in that case something like
https://v2.vuejs.org/v2/guide/list.html
<ul v-for="(value,key) in DataCounts" :key="some-key">
<v-icon v-if="...">{{ mdiArch }}</v-icon>
{{ value | numberFormatEn }}
Location Records
</ul>
I am trying to figure out how to add the exact property to the root link in a dynamically loaded menu. The menu entries are loaded from a REST API.
Currently the root path is always matched since it does not contain the exact property. In similar examples the root link is hard coded which I want to avoid.
This is the route that should be matched exactly
{ path: '/', component: HomePage }
The router-link is part of the menu, which is loaded via axios from the REST API and mapped to the state, including the root link "/". How can I access only this one item in the for loop to add the exact property?
<router-link tag="li" class="link" v-for="item in menu" v-bind:key="item.id" :to="item.slug">{{ item.content }}</router-link>
May be I am missing something, or there is a better way to achieve this?
Many thanks
Conditionally bind the exact prop like this.
<router-link tag="li" class="link" v-for="item in menu" :key="item.id" :to="item.slug" :exact="item.slug === '/' ? true : false">
{{ item.content }}
</router-link>
Have you ever try
<router-link tag="li" class="link" v-for="item in menu" v-bind:key="item.id" :to="item.slug" v-bind={ "exact": item.slug === "/" ? true : false }>{{ item.content }}</router-link>
This works:
<span v-if="name">
Hi there, {{ name }}
</span>
... but it forces me to use span for the whole text, I just want it on the name variable. In handlebars for example I could do:
{{#if name}}
Hi there, <span>{{ name }}</span>
{{/if}}
You can use a template for that.
we can use v-if on a <template> element, which serves as an invisible
wrapper. The final rendered result will not include the <template>
element.
For example:
<template v-if="name">
Hi there, <span>{{ name }}</span>
</template>
I can't find a way to choose different options for rendering text inside of v-for. Is it possible or do I need to structure the logic differently to do something like the code below?
<template>
<ul v-show="showNotifications">
<li v-for="notification in notifications">
// if notification.type = 'friend request'
New friend request from {{ notification.name }}
// else
New notification from {{ notification.name }}
</li>
</ul>
</template>
Notification is a array of objects with data like name and notification type.
Use another template element like following (not tested)
<template>
<ul v-show="showNotifications">
<li v-for="notification in notifications">
<template v-if="notification.type == 'friend request'">
New friend request from {{ notification.name }}
</template>
<template v-else>
New notification from {{ notification.name }}
</template>
</li>
</ul>
I did what Xymanek said and that isn't work for me completely, I also added a method like this since I realize the component is reactive to the variable in "v-for", in this case "notifications"
forceReload(){
this.files.push(fakeNotification);
this.files.pop();
}
as can see this just force the v-for to "re-render" by pushing a fake object to the array.
you can call this method just after the value of "notification.type" change.