How do I validate inside of a loop with v-show empty items with vuejs2. I was trying the following but without any results
<div v-for="user in $store.state.users.data">
<ul>
<li v-show="user.mobil !== null || user.mobil !== ''" >
<a v-bind:href="'tel://' + user.mobil"> <i class="fa fa-mobile-phone"></i> <span>{{ user.mobil }} </span></a>
</li>
</ul>
</div>
Compare like v-show="user.mobil":
new Vue({
el: '#app',
data: {
users: [{
mobil: '123',
name: 'Foo'
},
{
mobil: '',
name: 'Bar'
},
{
mobil: null,
name: 'Baz'
},
]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="user in users">
<ul>
<li v-show="user.mobil">
{{user.name}}
</li>
</ul>
</div>
</div>
How do you check for an empty string in JavaScript?
Related
Is it possible to add a link to twitter user profile which is tagged in a tweet?
I figured out how do i find tagged users in a text with 'includes', but i am not able to add a link either with '.link' or '.href' attribbute.
axios.post(API_URL, null, { params }).then(res => {
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
this.tweets.forEach(el => {
el.tweet_text.split(' ').forEach(word => {
if (word.includes('#')) {
}
})
})
})
})
This is component where data is shown
<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
<div class="tweet-card">
<div class="username-time">
<div class="user-info">
<p class="name">
{{ tweet.twitter_name }}
</p>
<p class="user-info-p">
#
</p>
<p class="username">
<a
:href="'https://twitter.com/' + tweet.twitter_username"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
</div>
<div class="time">
<p>{{ tweet.added_at }}</p>
</div>
</div>
<div class="text">
<p>{{ tweet.tweet_text }}</p>
</div>
</div>
</div>
</div>
In res.data.tweets i am fetching tweets from server and storing values for every tweet in tweetData obj. In tweet_text, i would like to add a link to the tagged twitter users(clickin on tag will redirect to twitter profile). I figured out how do i find tagged users but i am not able to add a link either with .link or .href attribbute.
axios.post(API_URL, null, { params }).then(res => {
this.currentPage = res.data.page
this.numberOfPages = res.data.numberOfPages
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
// Below this line i am trying to achieve something by adding a link
this.tweets.forEach(el => {
el.tweet_text.split(' ').forEach(word => {
if (word.includes('#')) {
// word = 'this is tag'
word.link('https://twitter.com')
console.log(word.link)
}
})
})
})
})
This is component where data is shown
<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
<div class="tweet-card">
<div class="username-time">
<div class="user-info">
<p class="name">
{{ tweet.twitter_name }}
</p>
<p class="user-info-p">
#
</p>
<p class="username">
<a
:href="'https://twitter.com/' + tweet.twitter_username"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
</div>
<div class="time">
<p>{{ tweet.added_at }}</p>
</div>
</div>
<div class="text">
<p>{{ tweet.tweet_text }}</p>
</div>
</div>
</div>
</div>
I don't think it's going to work this way.
You should use a computed property which will append the username to the twitter base link. Then, in your template, you can link the href property to the computed property.
computed: {
userLink: function () {
return "http://twitter.com/" + this.tweet.twitter_username
}
}
You can now use this "userLink" directly in your template.
<p class="username">
<a
:href="userLink"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
I didn't test the code I wrote, feel free to let me know if you need further advice ;)
i have looked up every relating posts for 8hours but still cant solve it
{comments.map((c) => {
console.log(c)
return(
<div className="col-lg-12" key={c._id}>
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
{c.message}
<i className="fa fa-quote-right" />
</p>
<ul className="stars list-unstyled">
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star-half-alt" />
</li>
<li>
<i className="fa fa-star" />
</li>
</ul>
</div>
<div className="client-info">
<h5>{c.companyName}</h5>
<p>{c.ip}</p>
</div>
</div>
</div>
states
const [comments, setComments] = useState([]);
const getComments = async function () {
try {
const response = await axios.get("/comment");
console.log(response);
setComments(response.data.comments);
} catch (error) {
console.error(error);
}
};
smaple object
{ companyName: "asd" ip: "112.214.38.68" message: "asd" _id: "6162fb4c06b4541fa2420f5c" }
enter image description here
Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, companyName, message, ip}). If you meant to render a collection of children, use an array instead.
please help
complete code
import React, { useState } from "react";
import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
import ScreenHeading from "../../utilities/ScreenHeading/ScreenHeading";
import ScrollService from "../../utilities/ScrollService";
import Animations from "../../utilities/Animations";
import "./Testimonial.css";
import shape from "../../../src/img/Testimonial/shape-bg.png";
import Comment from "../CommentComponent/Comment";
import axios from "axios";
import lady from "../../../src/img/Testimonial/lady.png";
import mike from "../../../src/img/Testimonial/mike.png";
import man from "../../../src/img/Testimonial/man.png";
export default function Testimonial(props) {
const [comments, setComments] = useState([]);
const getComments = async function () {
try {
const response = await axios.get("/comment");
console.log(response);
setComments(response.data.comments);
} catch (error) {
console.error(error);
}
};
let fadeInScreenHandler = (screen) => {
if (screen.fadeInScreen !== props.id) return;
Animations.animations.fadeInScreen(props.id);
getComments();
};
const fadeInSubscription =
ScrollService.currentScreenFadeIn.subscribe(fadeInScreenHandler);
const options = {
loop: true,
margin: 0,
nav: true,
animateIn: "bounceInRight",
animateOut: "bounceOutRight",
dots: true,
autoplay: true,
smartSpeed: 1000,
responsive: {
0: {
items: 1,
},
768: {
items: 1,
},
1000: {
items: 3,
},
},
};
return (
<div>
<ScreenHeading title={"Valuable Comments"} subHeading={"방명록 리스트"} />
<section className="testimonial-section fade-in" id={props.id || ""}>
<div className="container">
<div className="row">
<OwlCarousel
className="owl-carousel"
id="testimonial-carousel"
{...options}
>
{comments}
{!comments ? (
<div>non</div>
) : (
<div>
{comments.map((c) => {
console.log(c)
return (
<div className="col-lg-12" key={c._id}>
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
{c.message}
<i className="fa fa-quote-right" />
</p>
<ul className="stars list-unstyled">
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star" />
</li>
<li>
<i className="fa fa-star-half-alt" />
</li>
<li>
<i className="fa fa-star" />
</li>
</ul>
</div>
<div className="client-info">
<h5>{c.companyName}</h5>
<p>{c.ip}</p>
</div>
</div>
</div>
);
})}
</div>
)}
</OwlCarousel>
</div>
</div>
</section>
<div className="footer-image">
<img src={shape} alt="not responding" />
</div>
</div>
);
}
You’ve embedded a bare {comments} in your render function right before the ternary; comments is an object and can’t be dropped into the DOM raw, just like the error message is telling you.
Remove that line and it should be fine.
The issue is here:
{comments}
You should remove this line.
If you woule like to see the comments you should do:
{JSON.stringify(comments)}
I am new to Vue.js. Very new so this question might sound a lot like a first graders. Forgive me.
I have the App.vue and Character.vue setup. I wanted to create characters on the fly and add them to an array (in App.vue) and let the rendering of the look/feel of the characters be done using Character.vue. The characters are created and added to the array and can be retrieved properly. Only thing is...Character.vue doesn't render them properly because for some reason, the character it retrieves from the array is undefined.
Help me?
Attaching files
App.vue
<template>
<div>
<div class='gameHeader'>
<h1>{{ gameHeader }}</h1>
</div>
<div class='gameMessages'>
<div class='gameMessage' v-for="msg in gameMessages">
{{ msg }}
</div>
</div>
<div class='gameMain'>
<button #click="rollNewCharacter">Roll New</button>
<div class="playerParty">
<character v-for="p in playerParty"></character>
</div>
<div class="computerParty">
<character v-for="c in computerParty"></character>
</div>
</div>
<div class='gameFooter'>
{{ gameFooter }}
</div>
</div>
</template>
<script>
import Character from "./assets/components/Character.vue";
export default {
components: { 'character': Character },
data: function(){ return { gameHeader: 'Monster Attack', gameMessages:[], playerParty: [], computerParty: [], gameFooter: '' }; },
methods: {
rollNewCharacter() {
var c = Character;
c.name = 'Usman';
c.type = 'Warrior';
c.mana = 100;
c.health = 100;
c.totalHealth = 100;
c.totalMana = 100;
console.log(c.name);
this.playerParty.push(c);
console.log(this.playerParty[0].name);
//this.computerParty.push(chr2);
}
}
}
</script>
Character.vue
<template>
<div class="character">
<span class='name'>{{ name }}</span><span class='type'>({{ type }})</span>
<div class='health'><div class='total' :class="totalHealth"><div class='health' :class="health"></div></div></div>
<div class='mana'><div class='total' :class="totalMana"><div class='mana' :class="mana"></div></div></div>
<span class='damage'>{{ damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
<script>
export default {
props: [ 'name', 'type', 'mana', 'health', 'damage' , 'totalHealth', 'totalMana' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
</script>
<style>
</style>
You should pass a prop when using the character component:
<character :character="p" v-for="p in playerParty"></character>
I have updated the character to receive only one prop:
export default {
props: [ 'character' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
And this is the character component template with the new prop:
<template>
<div class="character">
<span class='name'>{{ character.name }}</span><span class='type'>({{ character.type }})</span>
<div class='health'><div class='total' :class="character.totalHealth"><div class='health' :class="character.health"></div></div></div>
<div class='mana'><div class='total' :class="character.totalMana"><div class='mana' :class="character.mana"></div></div></div>
<span class='damage'>{{ character.damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
this is the order schema with cart as an object (session array);
var orderSchema = mongoose.Schema({
user :{
type : Schema.Types.ObjectId, ref: "User"
},
name : {
type : String
},
phone : {
type : String
},
residence : {
type : String
},
street :{
type : String
},
building :{
type : String
},
status :{
type : String
},
paymentMode :{
type : String
},
cart :{
type : Object
}
});
and here is the express route which get orders from database;
app.get('/api/profile', isLoggedIn, function(req, res, next) {
Order.find({user : req.user}, function(err, orders) {
if (err) return err;
var cart;
orders.forEach(function(order) {
cart = new Cart(order.cart);
order.items = cart.generateArray();
});
res.render('pages/profile.ejs', {orders : orders});
});
});
Finally the ejs template ;
<div class="row">
<!--Middle Part Start-->
<div id="content" class="col-sm-12">
<h1 class="title">Orders</h1>
<% for(p=0; p<orders.length; p++){ %>
<div class="panel panel-default">
<div class="panel-body">
<ul class="list-group">
<% for(i=0; i<items.length; i++){ %>
<li class="list-group-item">
<span class=''><%= items[i].name %> <%= items[i].qty %> <%= items[i].price %>
<%= items[i].price %></span>
</li>
<% } %>
</ul>
</div>
<div class="panel-footer"> </div>
</div>
<% } %>
</div>
Looping through the individual orders is giving me headache.
After more research this solved my problem:
<div class="row">
<!--Middle Part Start-->
<div id="content" class="col-sm-12">
<h1 class="title">Orders</h1>
<% for(i=0; i<orders.length; i++){ %>
<div class="panel panel-default">
<div class="panel-body">
<ul class="list-group">
<% for (p in orders[i].cart) { %>
<li class="list-group-item">
<span class=''><%= orders[i].cart[p].item.name %> quantity:<%= orders[i].cart[p].qty %> Unit Price:<%= orders[i].cart[p].item.price %>
Total Price :<%= orders[i].cart[p].price %></span>
</li>
<% } %>
</ul>
</div>
<div class="panel-footer">
<a><span>Status : <span><%= orders[i].status %> </div>
</div>
<% } %>
</div>
<!--Middle Part End -->
</div>