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>
Related
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);
},
In my vue template I have:
<ul>
<li>slide a</li>
<li>slide b</li>
....
</ul>
But I want to pass in each slide from the parent using a slot, so:
<carousel>
<img src="abc.jpg">
<img src="xyz.jpg">
</carousel>
But how can I loop out what is passed in to each li? So I want to end up with:
<ul>
<li><img src="abc.jpg"></li>
<li><img src="xyz.jpg"></li>
....
</ul>
Also I want to be able to pass in any dom element via the slot to the list element.
As Michael said, you can achieve this behavior via scoped slots.
In your carousel component, the template will look like this :
<ul>
// TODO : Add a :key with a unique identifier
<li v-for="item in items">
<slot name="item" :item="item">
{{ item }}
</template>
</li>
</ul>
And when using the component, you will do something like this :
<carousel :items="images">
<img #item="{ src }" :src="src">
</carousel>
Depending on your images data, you may need to get the source from another property.
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 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
I am unable to do this:
<ul>
<li v-repeat="candy: candies">
<ul>
<li v-repeat="flavour: candy.flavours">
{{ candy.$index }}
</li>
</ul>
</li>
</ul>
Any work around?
UPDATE 2: v-for now supports specifying an alias for $index: http://vuejs.org/api/#v-for That should allow you to avoid naming collisions on $index.
UPDATE: VueJS 1.0 has deprecated v-repeat in favor of v-for. The same solution applies though.
Try using $parent.$index to access an $index in a parent scope.