We Keep Coding

Vue - v-if no item with that name in the list then show an image

<ul class="ulItems" v-for="item in listingItems" :key="item.channels">
<li class="liItems">
{{ item.itemName }}
</li>
</ul>
I want to display an image in cases where the list does not contain an object with that name

If I understood you correctly, try like following snippet:
new Vue({
el: '#demo',
data() {
return {
listingItems: [{itemName: 'aaa', channels: 1}, {itemName: '', channels: 2}, {itemName: 'bbb', channels: 3}],
noNameImg: 'https://picsum.photos/50'
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul class="ulItems" v-for="item in listingItems" :key="item.channels">
<li class="liItems" v-if="item.itemName">
{{ item.itemName }}
</li>
<li class="liItems" v-else>
<img :src="noNameImg" />
</li>
</ul>
</div>

mouseover event not firing till clicked on Google Chrome

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>

Target clicked element in Vue

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

How to show all data of Object with Vue.js

I would like to show a list in my HTML all the data contains in my Object.
This is my HTML
<template>
<div id="builder">
<div class="container">
<ul>
<li v-for="item in items">{{ item.firstName }}
<ul>
<li>{{ item.secondLevel.secondName }}
<ul>
<li>{{ item.secondLevel.thirdLevel }}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
This is my data
data () {
return {
items: [
{ firstName: 'HTML',
secondLevel: [
{
secondName: 'HEADER',
thirdLevel: ['title', 'subtitle']
},
{
secondName: 'ARTICLE',
thirdLevel: ['paragraph', 'svg', 'image']
}
]
},
{ firstName: 'CSS',
secondLevel: [
{
secondName: 'SecondName CSS',
thirdLevel: ['thirdLevel CSS', 'thirdLevel CSS']
},
{
secondName: 'SecondName CSS 2',
thirdLevel: ['thirdLevel CSS 2', 'thirdLevel CSS 2']
}
]
}
]
}
}
I want to show something like this:
HTML
HEADER
title
subtitle
ARTICLE
paragraph
svg
image
CSS
SecondName CSS
thirdLevel CSS
thirdLevel CSS
SecondName CSS 2
thirdLevel CSS 2
thirdLevel CSS 2
Thanks!

Please check this updated code,
Steps to do,
just make v-for for SecondLevel Items and v-for for Third level as well
<template>
<div id="builder">
<div class="container">
<ul>
<li v-for="item in items">{{ item.firstName }}
<ul v-for="d in item.secondLevel">
<li>{{ d.secondName }}
<ul v-for="t in d.thirdLevel">
<li>{{ t }}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>

You are on a right track. In order to solve this question you need to modify the nested v-for loops.
For a working solution I came up with this:
<div id="vue-instance">
<ul>
<li v-for="item in items">
{{ item.firstName }}
<ul>
<li v-for="secondLevel in item.secondLevel">
{{secondLevel.secondName}}
<ul>
<li v-for="thirdLevel in secondLevel.thirdLevel">
{{thirdLevel}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JSFiddle

Meteor.js with Iron Router buttons and forms in templates not working

I have a project using Meteor.js and Iron:router. Before I had any routing going on, and my application was just one page, my forms and buttons were all working just fine, but now that I have routing to multiple pages working, my forms and buttons don't seem to be "clickable." Everything that is already in the database loads and renders fine, but I now have no way to add/remove/change the data from my application.
Here is the HTML:
<template name="home">
<title>Grocery List</title>
<div>
<ul class="menu">
<li class="menuItem">{{> loginButtons}}</li>
<li class="menuItem">Home </li>
<li class="menuItem">Saved Lists</li>
<li class="menuItem">About</li>
</ul>
</div>
{{#if currentUser}}
<div class="container">
<header>
<h1 id="title">Grocery List</h1>
<form class="new-item">
<input type="text" name="text" placeholder="Type to add new items" />
</form>
</header>
<ul>
{{#each items}}
{{> item}}
{{/each}}
</ul>
</div>
<div class="container">
<header>
<h1>Items Found</h1>
</header>
<ul>
{{#each found_items}}
{{> found}}
{{/each}}
</ul>
</div>
<div class="container">
<header>
<h3>
Tax: ${{calcTax}}
</h3>
<h2>
Total: ${{priceSum}}
</h2>
<button class="save">Save list</button>
</header>
</div>
{{else}}
<div class="container">
<h3>Please log in first.</h3>
</div>
{{/if}}
</template>
<template name="about">
<title>About Grocery List</title>
<div>
<ul class="menu">
<li class="menuItem">{{> loginButtons}}</li>
<li class="menuItem">Home </li>
<li class="menuItem">Saved Lists</li>
<li class="menuItem">About</li>
</ul>
</div>
<div class="container">
<header><h1>About</h1></header>
<p>This application can be used to make, save and update grocery lists. Once the user is in the store, they can use it to check off items on the list, put in the price and see the total, with tax.</p>
<p>Users can also save their previous lists to either reuse them, or compare current prices to previous ones.</p>
<p>Future implementations of this page would also allow the user to change the tax rate depending on their location, and include coupons and other discounts in the pricing.</p>
<h3>
Coding Environments
</h3>
<ul>
<li>IntelliJ IDEA</li>
</ul>
<h3>
Frameworks
</h3>
<ul>
<li>Meteor</li>
<li>Iron Router</li>
</ul>
<h3>
Languages
</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
</template>
<template name="saved">
<title>Saved Lists</title>
{{#if currentUser}}
<div>
<ul class="menu">
<li class="menuItem">{{> loginButtons}}</li>
<li class="menuItem">Home </li>
<li class="menuItem">Saved Lists</li>
<li class="menuItem">About</li>
</ul>
</div>
<div class="container">
<header><h1>Your Saved Lists</h1></header>
<ul>
{{#each saved_items}}
{{> save}}
{{/each}}
</ul>
</div>
{{else}}
<div class="container">
<h3>Please log in first.</h3>
</div>
{{/if}}
</template>
<template name="item">
<li>
<button class="found">Got it!</button>
<input type="number" name="price" placeholder="Sale Price" />
<span class="text">{{text}}</span>
</li>
</template>
<template name="found">
<li>
<button class="remove">×</button>
<span class="text">{{text}}</span>
<span class="price">{{price}}</span>
</li>
</template>
<template name="save">
<li>
<span class="text">{{text}}</span>
</li>
</template>
And here is the Javascript:
Items = new Mongo.Collection("items");
Found_items = new Mongo.Collection("found_items");
Saved_lists = new Mongo.Collection("saved_lists");
Router.route('home', {path: '/'}); // Add this route
Router.route('about', {path: '/about'});
Router.route('saved', {path: '/saved'});
if (Meteor.isClient) {
// This code only runs on the client
Template.home.helpers({
items: function () {
return Items.find({});
},
found_items: function () {
return Found_items.find({});
},
saved_items: function () {
return Saved_lists.find({});
},
priceSum: function(){
var userItems = Found_items.find({
userId: this._id
}).fetch();
var prices = _.pluck(userItems, "price");
var totalTaxed = _.reduce(prices, function(sum, price){
var total = sum + parseFloat(price);
return total + (total * 0.04712);
}, 0);
return totalTaxed.toFixed(2);
},
calcTax: function () {
var userItems = Found_items.find({
userId: this._id
}).fetch();
var prices = _.pluck(userItems, "price");
var tax = _.reduce(prices, function(sum, price){
return (sum + parseFloat(price)) * 0.04712;
}, 0);
return tax.toFixed(2);
}
});
Template.home.events({
"submit .new-item": function (event) {
event.preventDefault();
var text = event.target.text.value;
Items.insert({
text: text,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username
});
event.target.text.value = "";
}
});
Template.item.events({
"click .found": function (event, template) {
event.preventDefault();
var price = template.find('[name="price"]').value;
var text = template.find('.text').textContent;
Items.remove(this._id);
Found_items.insert({
text: text,
price: price
});
}
});
Template.home.events({
"click .save": function(event) {
event.preventDefault();
var list = Found_items.find({
userId: this._id
}).fetch();
Saved_lists.insert(list);
}
});
Template.found.events({
"click .remove": function(event) {
event.preventDefault();
Found_items.remove(this._id);
}
});
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
}

ok add a layout config first like that
Router.configure({layoutTemplate: 'layout'});
Router.route('home', {path: '/'}); // Add this route
Router.route('about', {path: '/about'});
Router.route('saved', {path: '/saved'});
in your html add
<template name="layout">
{{>yield}}
</template>
this should solve your problem but you have some other errors in your code and in your insert to collection and you have assign a lot of helpers in wrong templates,if you want i could recreate your app and show you just ask.