Building pagination with Resource Links not working as expected in vuejs.
Checking if data.links in return from Resource is not null be assigning class.
<nav >
<ul class="pagination">
<li class="page-item" :class="{'disabled': !products.links.prev , 'active': products.links.prev != null}">
<a class="page-link" #click="getPrevPage" >Previous</a>
</li>
<span class="mr-3"></span>
<li class="page-item" :class="{'disabled': !products.links.next, 'active': products.links.next != null}">
<a class="page-link" #click="getNextPage" >Next</a>
</li>
</ul>
</nav>
But I get error in Console
[Vue warn]: Error in render: "TypeError: Cannot read property 'prev' of undefined"
Previous and Next Implementation and find attached picture of data structure returned.
getNextPage(){
this.loadProduct(this.products.links.next);
},
getPrevPage(){
this.loadProduct(this.products.links.prev);
},
Related
My v-for loop looks like this:
<ul v-if="item.categorie_string">
<li v-for="(cat_int,index) in item.categorie_string.split(',')" :key="index">
{{myarray[cat_int].categoryname}}
</li>
</ul>
Variable categorie_string can be a string like ='1,2,3', ='5' or = NULL
To prevent the error where categorie_string == null I added v-if="item.categorie_string" to the parent element <ul> but I still get:
Cannot read properties of undefined (reading 'categoryname')"
Shouldn't this be working?
It works fine if I test it with an integer instead of cat_int.
You should also check if myarray[cat_int] exists:
<ul v-if="item.categorie_string">
<li v-for="(cat_int,index) in item.categorie_string.split(',')" :key="index">
<span v-if="myarray[cat_int]">{{myarray[cat_int].categoryname}}</span>
</li>
</ul>
I want to loop two list tags for every loop of v-for without looping ul. Is there any internal looping available in vuejs to escape the ul tag by getting looped or is there any other method.
<ul id="example-1" v-for="(item, index) in items" :key="item.message">
<li >
{{ item.message }}
</li>
<li>
{{ item.text}}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo', text: "baz" },
{ message: 'Bar', text: "quz" }
]
}
})
The obvious result that i can get is :
Foo
Bar
baz
quz
The result That i need:
Foo
baz
Bar
quz
You can loop on a <template> tag.
<ul id="example-1">
<template v-for="item in items">
<li>
{{ item.message }}
</li>
<li>
{{ item.text}}
</li>
</template>
</ul>
If you are using Vue <= 2.x, then you will need to assign keys to the inner elements, since templates cannot be keyed.
If you are using Vue 3.x, then you should assign a key to the <template>. This is a breaking change from earlier releases.
CodeExample
How to get style display value (none/block) by using Vue.js?
jsfiddle with an example: https://jsfiddle.net/DevCccc/52xqe8mv/
<div id="app">
{{count}}
<ul ref="mylist">
<li v-show="true">1</li>
<li v-show="true">2</li>
<li v-show="false">3</li>
</ul>
</div>
the ideal result should be: count=2
list:
1
2
this.count =
Array.from(this.$refs.mylist.children)
.filter(item=>item.style.display !== "none")
.length
I'm making a navigation component with nuxt.js, vue and storyblok. In this navigation i have a few items. i'm getting my navi items out of the storyblok API. i want to style certain navi items differently when the 'highlighted' attribute in the API equals to true or false.
My problem is that i dont exactlty know how to do that. this is what i have at this point.
div in my navigation component:
<div v-if="items" class="main-nav">
<nav>
<ul>
<li v-bind:class="{ highlighted: item.highlighted === isHighlighted, not_highlighted: item.highlighted === isNotHighlighted}" v-editable="items" :key="index" v-for="(item, index) in items">
<LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
</li>
</ul>
</nav>
</div>
this is how i retrieve my data:
data() {
return {
items: this.$store.state.settings.main_nav ? this.$store.state.settings.main_nav : [],
isHighlighted: true,
isNotHighlighted: false
}
}
whenever i try to console.log item.hightlighted it gives back an undefined error. i would appreciate some help.
Try as below =>
<div v-if="items" class="main-nav">
<nav>
<ul>
<li v-bind:class="item.highlighted === isHighlighted ? 'highlighted' : 'not_highlighted'" v-editable="items" :key="index" v-for="(item, index) in items">
<LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
</li>
</ul>
</nav>
</div>
You can also remove isNotHighlighted: false from data.
I have the
after I refresh the browser, the selected class go to the 首页, do not stay in 数据中心.
Who can help me with the issue?
my key code:
template:
<ul class="nav">
<li class="nav-item" ><router-link :to="homePath" :class="selectedIndex===0 ? 'selected' : '' " #click.native="selectedIndex=0">首页</router-link></li>
<li class="nav-item" ><router-link :to="dataCenterPath" :class="selectedIndex===1 ? 'selected' : '' " #click.native="selectedIndex=1">数据中心</router-link></li>
</ul>
script:
data(){
return {
selectedIndex: 0,
...
}
}
Whenever you refresh the page the JavaScript is reloaded and all the properties revert back to their initial values.
In your case selectedIndex is set back to 0.
To add the selected class to the link automatically when the target route is active make use of active-class prop on the ,router-link> as follows
<ul class="nav">
<li class="nav-item" ><router-link :to="homePath" active-class="selected" #click.native="selectedIndex=0">首页</router-link></li>
<li class="nav-item" ><router-link :to="dataCenterPath" active-class="selected" #click.native="selectedIndex=1">数据中心</router-link><li>
</ul>
edit
<ul class="nav">
<li class="nav-item" ><router-link :to="homePath" exact active-class="selected" #click.native="selectedIndex=0">首页</router-link></li>
<li class="nav-item" ><router-link :to="dataCenterPath" active-class="selected" #click.native="selectedIndex=1">数据中心</router-link><li>
</ul>
Make use of exact prop on home router link