I have a method to show a popup with some data, the function receive some data in a array and i need to show it in the popup html.
openDetails(data) {
const self = this;
// Create popup
if (!self.popup) {
self.popup = self.$f7.popup.create({
content: `
<div class="popup itemDetails">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">{{ data.name }}</div>
<div class="right">volver</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>This popup was created dynamically</p>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
</div>
`.trim(),
});
}
// Open it
self.popup.open();
},
This is how the popup looks
What i´m doing wrong here?
As you are using template literals:
<div class="title">${data.name}</div>
<div class="title" v-html="data.name"></div>
have you try like this ?
Related
how do i pass props into data ? i have a object that pass into prop and i want prop to set the image url with data "mainImage", must keep the mainImage.
<template>
<!-- start Product Header -->
<div class="ps-product__header">
<div class="ps-product__thumbnail" data-vertical="false">
<div class="ps-wrapper">
<div class="ps-product__gallery">
<div class="col-12 px-md-2 d-none d-md-block">
<div class="" style="cursor: pointer">
<b-img :src="mainImage" alt="" style="width: 100%" class="image" #click="showMainImage()"></b-img>
</div>
</div>
</div>
</div>
<div class="ps-product__variants">
<div class="col-12 d-none d-md-block my-4">
<div class="row">
<div class="col-3" v-for="(image, index) in product.images" :key="index">
<div class="thumbnail" style="cursor: pointer" #click="changeMainImage(image.src)">
<b-img :src="`${image.src}`" style="width: 100%" alt="" class="image" :class="mainImage === image ? 'activess' : ''"></b-img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
here is the script
<script>
export default {
name: 'ShopHeader',
props: {
product: {
type: Object,
required: true
}
},
data() {
return {
mainImage: String,
}
},
methods: {
changeMainImage(image) {
this.mainImage = image
}
},
mounted() {
this.mainImage = this.product.image
console.log(this.mainImage)
}
}
</script>
sample : https://stackblitz.com/edit/nuxt-starter-pake3o?file=components%2FShopHeader.vue
when you type on the stackblitz url with /product, the image will show up but when you go through the link the image wont show up, so anyone know how to fix this problem ? i assume it was mounted only load once and component wont render after it.
add v-if to tag
<img v-if="mainImage" :src="mainImage" class="image">
I'm loading default listing using vuejs. When I browse page it show me following error
[Vue warn]: Error compiling template:
My html template is as bellow:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
I'm using API to get data. When I inspected API response it's showing me response correctly but vuejs is not showing data in template. My VueJs code is as bellow:
Vue.component('Results',{
template : '#results-template',
props: ['books','genres']
})
and VueJs method is as bellow:
getBooks : function(){
var vm = this;
return $.get('apis.php?gtype=Books')
.done(function(d){
vm.books = JSON.parse(d);
});
}
My created on loading page code is as bellow:
created : function(){
var vm = this;
this.getBooks().done(function(){
........
});
}
Code for data :
data : {
books : []
}
Please help me what's wrong I'm doing?
Your are binding image incorrect way first of all make it correct. Replace your code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img :src="category.URL" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
with this code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
You've to use :src="category.URL" for image src binding not :src="{{category.URL}}"
Secondly in template call you are using "genres" have you initialized genres array or not? this may also cause for error. 1st check both of causes if problem not solved the check further.
I use $http.delete in a VueJS project to remove the users from a page. When I click on delete icon the user is delete it from the database but on the front end the html for that user is still on page. Will disappear if I refresh the page.
This whole HTML(down) is a user from a list of users, from a database. I tried wrapping the whole HTML with another div and use inside a v-if directive, but in this case will not show me any user.
So how can I remove the html element too, when I delete the user, without refreshing the page?
If there is another way to delete a user from database, beside this $http.delete, fell free to show it to me.
HTML
<template>
<div>
<div class="card visitor-wrapper">
<div class="row">
<div class="col-md-2">
<div class="checkbox checkbox-success">
<input type="checkbox" id="select-1">
<label for="select-1" style="width: 50px;"><img src="../../assets/icons/visitors-icon.svg" alt=""></label>
</div>
<i class="fa fa-user-o fa-2x" aria-hidden="true"></i>
</div>
<div class="col-md-3">
<p class="visitor-name">{{user.firstName}}</p>
<span class="visitor-email">{{user.userType}}</span>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{user.rid}}</p>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{user.departmentId}}</p>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{createdDate(user.createdDate)}}</p>
</div>
<div class="col-md-1 divider-left">
<div class="edit-icon">
<router-link :to="'/users/edit-user/'+user.rid"><a data-toggle="tooltip" data-placement="top" title="Edit Employee"><i class="ti-pencil-alt" aria-hidden="true"></i></a></router-link>
</div>
<div class="trash-icon">
<a data-toggle="tooltip" data-placement="top" title="Delete Employee" #click="removeUser(user.rid)"><i class="ti-trash" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</template>
JS
export default {
props: ['user'],
methods: {
removeUser(item) {
this.$http.delete('/user/' + item)
.then((response) => {
console.log('response', response);
});
}
}
}
Set a v-if on the element that you want to have removed.
In your data you can have an attribute like; userIsActive or something which defaults to true. If your ajax call is a success you can set it to false which will make the element disappear with the v-if.
removeUser(item) {
this.$http.delete('/user/' + item)
.then((response) => {
this.userIsActive = false;
console.log('response', response);
});
}
Of course there are dozens of variations on how to do this but this might help you out.
you can use v-html for remove html text and only show text..
<p v-html="items"></p>
I'm using a bootstrap tabs to create a timeline like tabs. It works only first 4 times and then stops changing after that.
I made a fiddle please look into it.
code:
<ul class="nav nav-tabs" role="tablist" id="timeline">
<div class="col-sm-3"><li role="presentation">2011</li></div>
<div class="col-sm-3"><li role="presentation">2013</li></div>
<div class="col-sm-3"><li role="presentation">2014</li></div>
<div class="col-sm-3"><li role="presentation">2016</li></div>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="2011">
<p>1</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="2013">
<p>2</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="2014">
<p>
3</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="2016">
<p>
4
</p>
</div>
</div>
script:
$('#timeline a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Make sure you close off your code statements with a semi colon ;
Also needed to remove the active class for the tabs li.
Web dev tools are your friend. watch for classes which may be added
$('#timeline a').click(function (e) {
$('#timeline li').removeClass('active');
e.preventDefault();
$(this).tab('show');
});
here is fiddle https://jsfiddle.net/5253gmpu/
I have simple manual text slider with using show/hide code. every thing is ok but when i click previous slide button, current text will be hide but previous one won't show. why it doesn't show ?!
this is my html code:
<div class="hand_1" id="hand_1">
<img id="hand_img_1" src="myimage1.png" width="176.25" height="332.25" />
<div class="hand_text_1">
<h2>header</h2>
<p>paragraph 1</p>
<div class="connect-links">
<a id="next_icon_1" href="#" ></a>
</div>
</div>
</div>
<div class="hand_2" id="hand_2" style="display:none;">
<img id="hand_img_2" src="myimage2.png" width="176.25" height="332.25" />
<div class="hand_text_2">
<h2>header 2</h2>
<p>paragraph 2</p>
<div class="connect-links">
<a id="next_icon_2" href="#"></a>
<a id="previous_icon_2" href="#"></a>
</div>
</div>
</div>
and this is my javascript:
$(document).ready(function(){
$('#next_icon_1').on("click", function(){
$('#hand_img_1').fadeOut('fast');
$('.hand_text_1').fadeOut('fast');
$('.hand_2').fadeIn('fast');
});
$('#previous_icon_2').on("click", function(){
$('#hand_img_2').fadeOut('fast');
$('.hand_text_2').fadeOut('fast');
$('.hand_1').fadeIn('fast');
});
});