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
Related
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.
A parent link of a bootstrap dropdown isn't clickable by default so the link isn't working.
This is the html code:
<div class="dropdown">
<a id="item7" class="dropdown-toggle" data-toggle="dropdown" href="/mylink">MyLink</a>
<ul class="dropdown-menu">
<li class="submenuitem">
item 1
</li>
<li class="submenuitem">
item 2
</li>
</ul>
</div>
I want /myLink to clickable. How do I fix that?
Add this code to you page and parent links will work:
<script>
jQuery(function($) {
$('.dropdown > a').click(function(){
location.href = this.href;
});
});
</script>
I found that the easiest way to do it in bootstrap 4 is by deleting the "data-toggle" attribute from the parent element!
I have the following code, but displays text and don't instantiate the steps.
How can i achieve that?
Template:
<template>
<div>
<ul>
<li v-for="(step, index) in $store.state.steps" >
<{{`step-${index+1}`}}></{{`step-${index+1}`}}>
</li>
</ul>
</div>
</template>
Output:
<step-1></step-1>
<step-2></step-2>
<step-3></step-3>
<step-4></step-4>
<step-5></step-5>
<step-6></step-6>
<step-7></step-7>
Read documentation here https://v2.vuejs.org/v2/guide/components-dynamic-async.html
<component v-bind:is="currentComponent"></component>
How can I update the accordion-item title using a v-for loop inside F7+Vue ? I need each accordian-item title to be set to the Title of each object inside the myList array that is being looped over using the v-for.
Here is example below:
<f7-list-item v-for="value in myList" accordion-item title="{{value.Title}}">
<f7-accordion-content>
<f7-block>
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</f7-block>
</f7-accordion-content>
</f7-list-item>
</f7-list>
Due to the time required for me to wrap my head around how I would use the current F7+Vue Accordion with a v-for to inject the title element... it seems that this is not possible. I could be wrong. I ended up resolving this by using the standard non f7+vue components...
example:
<div class="list accordion-list">
<ul>
<li class="accordion-item" v-for="value in myList">
<a href="#" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">{{value.Title}}</div>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</div>
</div>
</li>
</ul>
</div>
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