I'm trying to run a function when the cursor is over a list item like so:
<div id="vue-app">
<ul>
<li v-for="item in items" #mouseover="removeItem(item)">{{item}}</li>
</ul>
</div>
new Vue({
el: '#vue-app',
data: {
items: ['meat', 'fruits', 'vegetables'],
},
methods: {
removeItem(value) {
...
}
},
});
however the mouseover event only fires when I click on the list item. What am I not doing correct here?
MouseOver
MouseClicked
Check this working code
new Vue({
el:'#vue-app',
data:{
items:['meat','fruits','vegetables'],
},
methods:{
removeItem(value){
console.log(value);
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.js"></script>
<div id="vue-app">
<ul>
<li v-for="item in items" #mouseover="removeItem(item)">{{item}}</li>
</ul>
</div>
Related
I am new to Vue.js and I have trouble on answering my code activities:
So the menu button would open selections from the drop down box upon clicking, and when you click any of the selections, it would go back to the menu button
index.js
const vm = new Vue({
el: '#root',
data: () => {
{return {menuClick: true}}
},
methods: {
methodClick(e){
console.log(event.target.value)
}
},
template: `
<div #click="methodClick">
<a class='dropdown-button btn' href='#' v-if="methodClick">Open</a>
<ul class='dropdown-content'v-else="!methodClick">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
</div>
`
});
index.html
<!--Don't edit this! Change to the index.js file (click on the link on the left side) and edit that file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<style>.dropdown-content{ display: block !important; opacity: 1 !important; }</style>
<div id="root">
</div>
<!--Don't edit this! Change to the index.js file (click on the link on the left side) and edit that file-->
When I console log it, it just says it is undefined.
You haven't made use of the attribute 'menuClick'
const vm = new Vue({
el: '#root',
data: () => {
return {menuClick: false} // changes added
},
methods: {
methodClick(e){
console.log(event.target.value);
this.menuClick = !this.menuClick; // changes added
}
},
template: `
<div #click="methodClick">
<a class='dropdown-button btn' href='#' v-if="!menuClick">Open</a> // changes added
<ul class='dropdown-content' v-else> // changes added
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
</div>
`
});
In Vue.js how do you target/detect the clicked element to perform a basic toggle class?
I've written this which toggles successfully but when you click an a the class is applied to to all li's
HTML
<ul id="app" class="projects">
<li v-bind:class="dyClass">Project A</li>
<li v-bind:class="dyClass">Project B</li>
<li v-bind:class="dyClass">Project C</li>
<li v-bind:class="dyClass">Project D</li> </ul>
JS
new Vue({
el: '#app',
data: {
show: false,
},
computed: {
dyClass: function() {
return {
show: this.show
}
}
}
})
I'm new to Vue.
EDIT.
I managed to get it working with a mix of help from below, but I dont seem to be able to get the toggle effect.
<ul id="app" class="projects">
<li :class="{show:selected == 1}">
<a href="" #click.prevent.stop="selected = 1" >Exposure</a>
</li>
<li :class="{show:selected == 2}">
<a href="" #click.prevent.stop="selected = 2" >Exposure</a>
</li>
<li :class="{show:selected == 3}">
<a href="" #click.prevent.stop="selected = 3" >Exposure</a>
</li>
</ul>
and
new Vue({
el: '#app',
data: {
selected: false,
}
});
You can pass element to function ($event):
:click=dyClass($event) Then in computed:
dyClass: function(event) {
event.target.toggleClass('whatever')
}
As i understand you have some li items and you want to add an active class when a specific li gets clicked.
Solution:
the "html" part:
<div id="app">
<ul class="projects">
<li v-for="project in projects"
:key="project.id"
:class="{ active: project.id === activeProjectId }"
#click="activeProjectId = project.id"
>
{{ project.name }}
</li>
</ul>
</div>
The "vue" part
new Vue({
el: "#app",
data: {
projects: [
{ id: 1, name: 'Project A' },
{ id: 2, name: 'Project B' },
{ id: 3, name: 'Project C' },
{ id: 4, name: 'Project D' },
],
activeProjectId: 1
},
})
Then add some css to the 'active' class.
For more, See the fiddle
I have a hard coded menu.vue file that basically gets the url slug and adds a class of active if it matches the <a> href. It works just fine but I am sure there is a cleaner way of doing it so I am not copy/pasting the same code over and over. In Jquery I know I could just loop through all the <a> in an each and see if slug matches the href and addClass
menu.vue
<template>
<div>
<!-- Main site menu -->
<nav>
<ul>
<li>about</li>
<li>faq</li>
<li>signup</li>
<li>login</li>
<li>Contact</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
data(){
return {
slug: ''
}
},
created(){
var urlArray = window.location.pathname.split( '/' );
this.slug = urlArray[1];
},
}
</script>
Example: https://jsfiddle.net/wostex/63t082p2/46/
<div id="app">
<p v-for="link in links" :key="link">
<a :href="'/'+link" :class="{'active': slug == link}">{{link}}</a>
</p>
</div>
new Vue({
el: '#app',
data: {
links: [
'about',
'home',
'faq'
]
}
});
In this example each link has a corresponding class, e.g. 'home' class, 'faq' class.
I'm trying to follow a tutorial on Vue.js, but the code for the first lesson isn't working for v-repeat. I'm trying to display the data in the tasks object:
<div id="tasks">
<div>
<h1>Tasks</h1>
<ul class="list-group">
<li v-repeat="task: tasks">
{{ task.body }}
</li>
</ul>
</div>
</div>
<script>
new Vue ({
el: '#tasks',
data: {
tasks: [
{ body: 'Go to store', completed: false }
]
}
})
</script>
<li v-for="task in tasks">
v-repeat was deprecated in 1.0:
https://github.com/vuejs/vue/issues/1200
HTML side code
<template name="profPageAuthorSubmit">
<div>
<ul style="list-style-type:none" class="pclProf">
<li><img id="profilePagePic" src="{{profilePagePicture}}"><span class="username">{{authorSubmit}}</span></li>
<li class="accesories">{{a}} Poems</li>
<li class="accesories">{{b}} Short stories</li>
<li class="accesories">{{c}} Followers</li>
<li class="accesories">{{d}} Followings</li>
</ul>
</div>
<div>
<ul style="list-style-type:none" class="pcl">
{{#each Contents}}
<li class="p">
<p class="bucket">
<li><span class="contentType">{{type}}</span></li>
<li><span class="titleBody"><strong>{{{title}}}</strong></span></li>
<li><img class="authorPic" src="{{authorPhoto}}"><span class="authorName">{{author}}</span></li>
<li><span class="createdAtTime">Written at {{createdAt}}</span></li>
<li class="contentMain">{{{content}}}</li>
{{>contentEssentials}}
{{#if editing}}
{{>contentEdit}}
{{/if}}
{{>commentsTemp}}
</p>
</li>
{{/each}}
**{{#if nextPath}}
Load more
{{#unless ready}}
{{> spinner}}
{{/unless}}
{{/if}}**
</ul>
</div>
</template>
Client side code
profileController= RouteController.extend({
template: 'profPageAuthorSubmit',
increment: 10,
contentsLimit: function() {
return parseInt(this.params.contentsLimit) || this.increment;
},
findOptions: function() {
return {sort: {createdAt: -1}, limit: this.contentsLimit()};
},
subscriptions: function() {
this.ContentsSub = Meteor.subscribe('contents', this.findOptions());
return Meteor.subscribe('allUserData');
},
Contents: function() {
var locationArray= location.href.split('/');
var UserId= locationArray[4];
return contentsList.find({createdBy: UserId, anonymous: false}, this.findOptions());
},
data: function() {
var hasMore = this.Contents().count() === this.contentsLimit();
var nextPath = this.route.path({contentsLimit: this.contentsLimit() + this.increment});
console.log("ready");
return {
Contents: this.Contents(),
ready: this.ContentsSub.ready,
nextPath: hasMore ? nextPath : null
};
}
});
Router.map(function(){
Router.route('profPageAuthorSubmit',{
path: '/user/:createdBy/:contentsLimit?',
controller: profileController
});
});
Why is load-more button not showing. I have checked it again and again but still it is not showing. The same thing has worked in other templates.
Basically it is checking whether the contents number is greater than the number displayed, if it is then the load more button should show.
Thanking all
As far as i know, every child of a "ul" tag must be a "li" tag. So the "a" isnt recognized. Try to put the content inside a "li" tag.