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.
Related
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
My vue js component doesnt show on my project. I don't see any errors from my part as I have seen many examples before and this is the right logic to implement it. Can anyone help me?
index.blade.php file
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button></follow-button>
</div>
</div>
FollowButton.vue file
<template>
<div>
<button class="btn btn-primary ml-4"> Follow Me </button>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('follow-button', require('./components/FollowButton.vue').default);
const app = new Vue({
el: '#app',
});
ExampleComponent.vue file
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
make sure you use <div id="app"> inside write all vuejs code
Add this in app.js
Vue.component('follow-button', require('./components/FollowButton.vue').default);
after register follow-button you can use
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button> </follow-button>
</div>
</div>
after that run npm run dev
Note: - make sure index.blade.php here you added app.js file
For anyone who might have the same problem with me, somehow I had two divs with the same id="app" and that made sure that my vue.js file not to be implemented on my laravel project.
try to add to index.blade.php file
<script src="{{ mix('/js/app.js') }}"></script>
I have Laravel app, and create search box with algolia everything is good and the search is find but my question now for this code of Vue :
<template>
<ais-index app-id="myid" api-key="mykey" index-name="users">
<ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>
<ais-results>
<template slot-scope="{result}">
<div>
<h2>{{ result.name }}</h2>
<h4>{{ result.email }}</h4>
</div>
</template>
</ais-results>
</ais-index>
</template>
<script>
export default {};
</script>
I need spare the form ( ais-input ) in a place and put the result ( ais-results ) in another place of course same page
Something like that make two component one for input and second for result ( blew it will be in blade file ) :
<div class="col-md-2">
<search-box/> (<ais-input/>)
</div>
<div class="col-md-2">
<result-box/> (<ais-results/>)
</div>
Considering they seem to already be components, you can try to use them directly.
You can create two new Vue components, where you add the existing components:
<template>
<div class="col-md-2">
<ais-input class="search form-control shadow-sm rounded" placeholder="Search"></ais-input>
</div>
</template>
And the you can use them in your template as you wish.
From what I've seen it should close without adding anything special but every time I click on another expandable item the previous one doesn't close.
<template>
<div d-flex p-0 m-0>
<div mb-3>
<div v-for="item in items" :key="item.Id">
<div v-if="item.HasChildren === true">
<div
class="scanList pa-2 font-weight-light"
v-ripple="{ class: 'success--text' }"
#click="swapComponent(item)"
>
{{ item.Name }}
</div>
</div>
<div v-else-if="item.HasChildren === false">
<v-expansion-panel>
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ item.Name }}</div>
</template>
<v-card>
<QR justify-center :value="item.Id"></QR>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
</div>
<div v-if="model != null && model.HasChildren === false">
<v-card>
<template v-slot:header>
<div>{{ item.FullPathName }}</div>
</template>
<QR justify-center :value="model.Id"></QR>
</v-card>
</div>
</div>
<div v-if="items !== initialItems">
<div class="backButton" #click="swapPrevious()">
<v-icon class="arrow">fa-arrow-left</v-icon>
</div>
</div>
</div>
</template>
I'm on Vuetify 1.5. Thanks for the help.
You are trying to create a separate expansion panel in the loop and its independent, explicitly we can define a logic to close the other panels
Working codepen here (using vuetify 1.5x)
Changes for HTML:
Added a event trigger on wrapper around expansion panel.
Added v-model for each expansion panel.
<div v-else-if="item.HasChildren === false" #click="closeOtherPanel(item.Id)">
<v-expansion-panel v-model="panel[item.Id]">
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ item.Name }}</div>
</template>
<v-card>
<QR justify-center :value="item.Id"></QR>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
Changes for script:
Add panel property inside data object.
Add a method to close other panels
data: {
panel: {},
},
methods: {
closeOtherPanel(id) {
var self = this;
Object.keys(this.panel).map(x => {
if (x != id) self.panel[x] = null;
});
}
}
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/