This is the code (very simple)
<div class="container" id="vueApp">
<div class="content">
<div class="title animated flipInX">BIG TITLE</div>
<p><strong>Some subtitle</strong></p>
<custom-button fa-icon="fa-home"></custom-button>
<custom-button fa-icon="fa-envelope"></custom-button>
<custom-button fa-icon="fa-info"></custom-button>
</div>
</div>
<template id="btn-template">
<span class="btn fa #{{ fa-icon ? fa-icon : 'fa-star-o' }} font-size-40"></span>
</template>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>
<script>
Vue.component('custom-button', {
template: '#btn-template',
props: ['fa-icon'],
});
</script>
This is returnig fa-star-o and not the desired fa-icon. I really don't see any errors but I'm new to this so I'm hoping its something trivial.
I'm following this tutorial.
----SOLUTION----
<div class="container" id="vueApp">
<div class="content">
<div class="title animated flipInX">BIG TITLE</div>
<p><strong>Some subtitle</strong></p>
<custom-button fa-icon="fa-home"></custom-button>
<custom-button fa-icon="fa-envelope"></custom-button>
<custom-button fa-icon="fa-info"></custom-button>
</div>
</div>
<template id="btn-template">
<span class="btn fa #{{ faIcon }} font-size-40"></span>
</template>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>
<script>
Vue.component('custom-button', {
template: '#btn-template',
props: {
faIcon: {
type: String,
default: 'fa-star-o'
}
}
});
</script>
The prop name should be faIcon (camelCased).
http://vuejs.org/guide/components.html#camelCase_vs-_kebab-case
https://jsfiddle.net/asccyLus/
Also, it is better to use a default value for the faIcon instead of the inline if like this:
props: {
faIcon: {
type: String,
default: 'fa-star-o'
}
},
https://jsfiddle.net/asccyLus/1/
Related
I'm confused why it didn't work on my vue file when Im trying to auto import components in my view, the documentation says link you just need to set the components into true inside nuxt.config.js file, I tried but it doesn't work, do I properly import the custom vue?
this is my directory
Components
>Timeline.vue
>TimelineItem.vue
This will works fine but I want to automate and remove the importfrom script
<template id="timeline-template">
<ul class="timeline">
<li
is="TimelineItem"
v-for="(item, index) in items"
:key="index"
:item="item"
></li>
</ul>
</template>
<script>
import TimelineItem from './TimelineItem.vue'
export default {
components: { TimelineItem },
props: ['items'],
}
</script>
So I just updated my script like this I just removed the import file since I want to automate it
<script>
export default {}
</script>
Then in my nuxt.config.js I set the component into true
components: true,
This is my TimelineItem.vue
<template id="timeline-item-template">
<li class="timeline-item">
<div class="timeline-badge" :class="item.icon_status">
<i :class="item.icon_class"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">{{ item.title }}</h4>
<div class="timeline-panel-controls">
<div class="controls">
<a
v-for="(control, index) in item.controls"
:key="index"
:control="control"
>
</a>
</div>
<div class="timestamp">
<small class="text-muted">{{ item.created }}</small>
</div>
</div>
</div>
<div class="timeline-body">{{ item.body }}</div>
</div>
</li>
</template>
<script>
export default {
props: ['item'],
}
</script>
Updated
I tried using <TimelineItem/> instead using is="TimelineItem but it doesn't work
<template id="timeline-template">
<ul class="timeline">
<TimelineItem v-for="(item, index) in items" :key="index" :item="item" />
</ul>
</template>
<script>
export default {
props: ['items'],
}
</script>
OP's issue was fixed by importing TimelineItem inside of components.js!
Everything is working fine, as expected.
this is the modal
<template>
<div>
<transition name="modal" id="modal-template">
<div class="modal-mask" >
<div class="modal-wrapper">
<div class="modal-container" >
<div class="modal-header">
<slot name="header">
</slot>
</div>
<div class="modal-body" >
<slot name="body">
<h4 style="font-size:18px" class="order-title">
<!-- Productname -->
<h4 >{{items.name}}</h4>/<!-- this is not showing -->
</h4>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
The PARENT VIEW..
<template>
<div class="card">
<div v-bind:key="item.item_id" v-for="item in items" class="card-body">
<!--here i add the v-for to loop through the data but its undefined or empty -->
<div class="row product-order">
<div class="col-sm-12 col-lg-12">
<h4 >{{ item.name }}</h4>
<div class="row">
<div class="image-container">
<div class="col-2 product-info-product-image">
<div v-bind:key="items.item_id" v-for="items in item_id">
<OrderdetailModal
v-if="showModal" #close="showModal = false"/>
</div>
<img
#click="goToProductinfo(item.item_id)"
class="center product-info-product-image"
:src="item.product_image"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import OrderdetailModal from '../components/Orderdetail';
//beginning of data an methods calls
export default
{
name:"Product",
components:{
OrderdetailModal
},
data () {//here is the data of the parent view
return {
item_id:[],
showModal: false
}
},
methods:{
goToProductinfo(item_id)
{ //here is the function that fetch the data.
this.getProductinfo(item_id);//fetches data and set item_id to response
this.showModal = true;//sets modal to true
}
//end of all methods
//these function should work perfectly
}
}
//end of export default
</script>
//end of code
I have vue component.After axios response counter not updating on popup. showInterest function is called on created method.
<template>
<span class="interested-button">
<a data-toggle="modal" data-target="#buyModel" #click="showInterest(idea_id, owner_id)">
<i class="fa fa-usd" aria-hidden="true"></i> Interested to buy?
</a>
<div
class="modal fade"
id="buyModel"
tabindex="-1"
role="dialog"
aria-labelledby="buyModelLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="ideabuy">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="buyModelLabel">How much you are willing to spend?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{{ sharedPriceCount }}
<template v-if="sharedPriceCount == 0">
<form #submit.prevent="saveIdeaPrice">
<div class="modal-body">
<div class="form-group">
<input type="text" v-model="price" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</template>
<template v-else>
<div class="modal-body">
<div class="form-group">You have already shown interest for this Idea.</div>
</div>
</template>
</div>
</div>
</div>
</span>
</template>
<script>
import mixins from "../mixins";
export default {
name: "buyProduct",
mixins: [mixins],
props: ["input_name", "idea_id", "owner_id"],
data() {
return {
result: [],
loading: false,
price: 0,
sharedPriceCount: 0
};
},
created() {},
mounted() {},
methods: {
saveIdeaPrice() {
axios
.post("/idea-buy-price", {
id: this.idea_id,
owner: this.owner_id,
price: this.price
})
.then(res => {
this.loading = false;
})
.catch(res => (this.loading = false));
},
showInterest(idea_id, owner_id) {
let _self = this;
axios
.get("/idea-buy-price/" + idea_id + "/" + owner_id)
.then(
function(response) {
_self.result = JSON.stringify(response.data.data);
_self.sharedPriceCount = response.data.data.length;
console.log(_self.sharedPriceCount);
_self.loading = false;
}.bind(_self)
)
.catch(
function(error) {
_self.loading = false;
}.bind(_self)
);
},
updateCall() {}
}
};
</script>
I am getting Array data through api call.but on popup its not working properly.I want to update this.sharedPriceCount when popup open.to show the popup content.without refreshing page.
Anyone can help me on this?
If result and loading are updated then please disregard following:
I had trouble with this. within function in axios call.
Solved it by defining
var _self = this;
before axios call and using _self within response function
Inside of a Laravel app I have two independent vue components and I would like to trigger a re-render on the second component.
I use vuex where I already trigger a store mutation and I can see that the data is updated but the component will not re-render.
export default {
store: store,
. //code logic
.
.
methods: {
store: {
//axios async request where on success I trigger store mutation
self.$store.dispatch('getApprovals', 'testing/approvals'); //I can see in console the store request response
}
}
}
than the second component which should re-render
<template>
<div class="portlet light">
<div class="portlet-title tabbable-line">
<div class="caption">
<i class="icon-social-twitter font-dark hide"></i>
<span class="caption-subject bold uppercase">Approvals</span>
</div>
<div class="caption" style="float: right;">
</div>
<ul class="nav nav-tabs">
<li class="active">
Pending
</li>
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<div class="tab-pane active" id="tab_actions_pending">
<div class="mt-actions">
<div class="mt-action" v-for="approval in $store.state.approvals.approvals"
v-show="approval.status === 'pending'">
<div class="mt-action-body">
<div class="mt-action-row">
<div class="mt-action-info ">
<div class="mt-action-icon ">
<i class="icon-magnet"></i>
</div>
<div class="mt-action-details ">
<span class="mt-action-author"
v-show="approval.request_type == 'Timeoff Request'">{{ approval.request_type }} - {{ approval.type }}</span>
<span class="mt-action-author"
v-show="approval.request_type !== 'Timeoff Request'">{{ approval.request_type }} </span>
<p class="mt-action-desc"
v-show="approval.request_type == 'Timeoff Request'">{{
parseFloat(approval.days).toFixed(1) }} day/s requested</p>
<p class="mt-action-desc"
v-show="approval.request_type == 'Timeoff Request'">{{ approval.from}} -
{{ approval.to}}</p>
</div>
</div>
<div class="mt-action-datetime ">
</div>
<div class="mt-action-buttons ">
<span class="label label-warning"> Pending </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import store from './store';
import {editItem} from './actions';
export default {
vuex: {
getters: {
getApprovals: state => {
return state.approvals
}
}
},
store: store,
created() {
this.$store.dispatch('getApprovals', 'testing/approvals');
},
data() {
return {
approvals: {},
alert: {
show: false,
type: null,
title: null,
message: null,
}
};
}
}
</script>
How do we deal with this cases?
How to call method other component in Vue?
I have component HeaderSearch
<template>
<form action="">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button class="btn" type="button">
<i class="fa fa-search"></i>
</button>
</span>
<input type="text" #keyup="search(keyword)" v-model="keyword" class="form-control" placeholder="Search...">
</div>
</div>
</form>
</template>
<script>
export default {
data(){
return { keyword: "" };
},
methods: {
search: function(keyword){
if(keyword == ''){
// Want call method fetchPost in PostHome component here
}else{
}
}
}
}
</script>
And I have component PostHome
<template>
<div>
<div class="box r_8 box_shadow" v-for="post in posts">
<div class="box_header">
<a :href="post.url">
<h3 class="mg_bottom_10" v-text="post.title"></h3>
</a>
<small v-text="post.description"></small>
<a :href="post.url" class="box_header_readmore">Read more</a>
</div>
<div class="box_body">
<a :href="post.url" v-show="post.thumbnail">
<img :src="post.thumbnail" class="img_responsive" style="min-height: 300px;background-color: #f1f1f1;
">
</a>
</div>
<div class="box_footer" v-show="post.tags.length > 0">
<ul>
<li v-for="tag in post.tags">
<a v-text="tag.name" href="javascript:void(0)"></a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
posts: null,
}
},
methods: {
fetchPosts: function(){
var url = base_url + '/user/posts'
this.$http.get(url).then(res => {
this.posts = res.data;
});
}
},
created: function(){
this.fetchPosts();
}
}
</script>
I want when user type keyup to search then if
keyword == ''
call method fetchPost method in PostHome component
You can use Mixins if that method is reusable.
Reference: https://v2.vuejs.org/v2/guide/mixins.html