I am trying to scroll via v-scroll-to to an anchor in frontpage it works fine but if i navigate from subpage to indexpage anchor doesnt work because the anchor not in the DOM. How can is solve this problem?
<a v-for="menuItem in menuItems" :key="menuItem.id" :class="{'is-active': activeMenuItem === menuItem}" :href="menuItem.url" v-scroll-to="menuItem.url">{{ menuItem.text !== '' ? $t(menuItem.text) : '' }}</a>
The menuItem.url included the anchor.
Please refer this issue because might be useful for you.
https://github.com/rigor789/vue-scrollto/issues/100
I haven't used vue-scrollto, but according to this issue, it probably works by the following code.
<a v-for="menuItem in menuItems" :key="menuItem.id" :class="{'is-active':
activeMenuItem === menuItem}" :href="menuItem.url" #click="$scrollTo('#element')">{{
menuItem.text !== '' ? $t(menuItem.text) : '' }}</a>
Related
Currently trying to add a dynamic url to my background image inside select option. But it seems breaking, not sure how that comes and how to fix this. Looking for different combinations like ` or ' and even ". But really confused.
<select v-model.lazy="countryCode" #change="handleChange" class="select-field height-select-input select-width">
<option v-for="(country, index) in checkCountryName"
:key="index"
:value="country.country_code"
:selected="index === 0"
:data-value="country.city_name"
:style="{backgroundImage: 'url('https://www.countryflags.io/' + {{country.country_code}} + '/flat/64.png')'}"
>
{{ country.country_code }}
</option>
</select>
:style="`backgroundImage: url('https://www.countryflags.io/${country.country_code}/flat/64.png')`"
Is that the exact code you are using? If so, it looks like the issue is within the quotation marks on your url request.
You have
:style="{backgroundImage: 'url('https://www.countryflags.io/{{country.country_code}}/flat/64.png')'}"
Remove the quotes around the url and it should work
:style="{backgroundImage: 'url(https://www.countryflags.io/{{country.country_code}}/flat/64.png)'}"
I get into a problem. Here's my code:
<md-table-cell
:style="arrDisplay[1][i1+3] > 0 ? {background: 'orange'}: ''"
colspan="3"
v-for="(m1, i1) in 2"
:key="i1"
>
<div
contenteditable
v-text="arrDisplay[1][i1+3] > 0 ? arrDisplay[1][i1+3] : ''"
#blur="onEdit(1, i1+3)"
></div>
<div class="del" v-if="arrDisplay[1][i1+3] > 0">
<md-icon>clear</md-icon>
</div>
</md-table-cell>
I want the table cell have orange background when it's value > 0 else white. It work perfectly fine after calculate arrayDisplay but not when I edit it:
onEdit(y, x) {
var src = event.target.innerText
this.arrDisplay[y][x] = parseInt(src)
},
But if I edit it by Vue DeveloperTools it works. I think if I'm right the reason maybe Vue does not recognize that I change arrDisplay but have no idea how to fix it. What should I do ?
You are trying to update an item using an index in an array.
As explained here this is not reactive. That's why you don't see the update.
Try this:
Vue.set(this.arrDisplay[y], x, parseInt(src))
Note: make sure that this.arraDisplay[y] is reactive. If it is not, then you need to use Vue.set when creating it also.
Below is the file structure
I have default Index page under Pages folder, which has layout as _LayoutHarman.cshmtl
Code : Pages/Shared/_LayoutHarman.chtml
header menu : pages are in subfolder.ie category folder in this case
<a asp-route-cat_slug="electronic" asp-page="./category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="./category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="./category/index" >Toy</a>
footer menu : pages are on root folder
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
<a asp-page="./privacy" >Privacy</a>
Code : Pages/category/Index.cshtml
#page "{cat_slug?}/{pageIndex:int?}"
#model bList.Pages.category.IndexModel
#{
}
<nav aria-label="Page navigation example">
<ul class="pagination text-center">
#if(Model.prev_no!=0){
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.prev_no"> Previous</a></li>
}
#if (Model.no_more_record != "YES")
{
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.next_no">Next</a></li>
}
</ul>
</nav>
Here Next/ previous button generate url as follow
https://localhost:8080/category/toy/1
https://localhost:8080/category/toy/2
https://localhost:8080/category/toy/3
respective on selected category
Issue : When i visit on category page and click on prev or next button and then try to click on link Contact,Terms,Privacy i.e (which is on _LayoutHarman.cshtml) or on header menu then href become blank.
Edited One:
Code: On _LayoutHarman.cshtml
HeaderMenu:
<a href="./category/toy" >toy</a>
Footer Menu
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
Code: On Category/Index.html page
Prev</li>
Next
Now on Next/ Prev button click , header menu generates url as
https://localhost:44382/category/toy/category/toy hence error page occurs. but for footer menu contact/term/privacy works properly
I did reproduce your problem, you need to delete the point(.) in asp-page attribute in your _LayoutHarman.cshmtl.
Changed like this:
<a asp-route-cat_slug="electronic" asp-page="/category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="/category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="/category/index" >Toy</a>
<a asp-page="/Contact" >Contact</a>
<a asp-page="/terms" >Terms</a>
<a asp-page="/privacy" >Privacy</a>
And you don't need to add asp-page="category" in Pages/category/Index.cshtml, just delete this attribute in this page.
Here is my test result:
Do you really need all this extra server side processing, asp-route-cat_slug asp-page?
Can't you just use plain old fashion HTML hyperlink? As for the dynamic parameters maybe you can set only them...
View category
Just an idea to think on...
Cheers
With this code
<router-link
class="button is-success is-rounded is-outlined"
v-for="ro in cRoutes"
v-bind:key="ro.index"
active-class="is-outlined"
:to="ro.path"
>
<span class="icon"><b-icon pack="fas" v-bind:icon="ro.meta.icon" /></span>
<span>{{ ro.name }}</span>
</router-link>
I get a bunch of filled icons (this uses Bulma, but thats not important here) and the icon with the active path is outlined.
Now I would like to have it the other way round: Every Icon should get
the "is-outlined" class except the active icon, which should get no
extra class.
I probably could do something like :class="{'is-outlined' : ro.path !== route.matched.path}" but I would prefer to have the easy approach of the active-class or something similar.
All my pages are in DIRECTORIES and are ALL named index.php
I use independent modules, each in its own directory, so that they can be dropped into any web app. The links and the URLs end with: "directory_name/".
basurl(); is a function to simplify links.
init.php
defined('PDQURL') or define('PDQURL', 'http://pdq/dev/');
function base_url($location) {return PDQURL.$location;}
nav.php
<a class="nav-link" href="<?=base_url('index.php')?>">Home</a>
<a class="nav-link" href="<?=base_url('conversions/')?>">Conversions</a>
<a class="nav-link" href="<?=base_url('employees/')?>">Employees</a>
You have to get the current URL of your page. Actually there are different ways to get the current url with php. I 'm using the following piece of code.
$current = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http")
. "://" . $_SERVER[HTTP_HOST] . $_SERVER[REQUEST_URI];
After you 've got the current called uri, juxt compare it with your base url.
<a class="nav-link<?= base_url('example.php') == $current ? ' active-link' : '' ?>">Example</a>
This means, that if you call your example.php page, and the current url matches the result of your base_url() function, the active-link css class will be displayed.