i am using laravel-vue-pagination package for pagination on my laravel vuejs project.but when i click the next page it's not rendering and going to the page no.first page is loading fine.how can i go to the page number 2? here is the code. is another component.i did it accroding to the documentation.still it's not working.
<template>
<!-- Blog Comment threats -->
<div>
<h3>Comments (4)</h3>
<ul class="commentlist">
<comment :comments="comments.data"></comment>
</ul>
<pagination :data="comments" #pagination-change-page="getResults"></pagination>
</div>
<div>
</div>
<!-- blog comments form -->
<new-comment></new-comment>
<script>
import newComment from "./newComment.vue";
import Comment from "./Comment.vue"
export default {
components: {newComment, Comment},
props: ['post'],
data() {
return {
comments: {},
}
},
mounted() {
// Fetch initial results
this.getResults();
},
methods: {
getResults(page = 1) {
axios.get(`/api/post/${this.post}/comment?page=' + page`)
.then(response => {
this.comments = response.data;
});
},
},
}
Related
I have created my own custom Modal plugin in vuejs to be added to my Laravel 8 app. The problem I am facing is opening the modal.
I have created the plugin in my app.js file
const Modal = {
install (Vue) {
this.event = new Vue()
Vue.prototype.$modal = {
show (modal, params = {}) {
Modal.event.$emit('show', modal, params)
},
$event: this.event
}
}
}
Vue.use(Modal)
I have created two vue components for my modal
<!-- AppModal //-->
<template>
<transition name="modal">
<div v-if="visible">
<div class="app-modal" #click.prevent="$modal.hide(name)"></div>
<div class="app-modal-inner">
close
<slot name="body" :params="params"/>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "AppModal",
data () {
return {
params: {},
visible: false,
}
},
props: {
name: {
required: true,
type: String,
}
},
methods: {
setVisible () {
this.visible = true
},
setHidden () {
this.visible = false
}
},
beforeMount() {
this.$modal.$event.$on('show', (modal, params) => {
if (this.name !== modal) {
return
}
this.params = params
this.setVisible()
})
},
}
</script>
<!-- AppNonMemberRegisterModal //-->
<template>
<app-modal name="register">
<template slot="header">
<h1 class="text-lg-left text-4xl border border-b-2">Register Now</h1>
</template>
<template slot="body" slot-scope="{ params }">
<p>You need to register in order to share, comment and like on the site</p>
</template>
</app-modal>
</template>
<script>
import AppModal from "../AppModal";
export default {
name: "AppNonMemberRegisterModal",
components: { AppModal },
}
</script>
Where I am firing the event I import the AppNonMemberRegisterModal and I have the following click event: #click.prevent="$modal.show('register')".
When the following code is reached Modal.event.$emit('show', modal, params) I get the following error messages in my cnosole console.log(Modal)
Vue 3 removes the Event API (i.e., $on, $off, etc.). The migration guide recommends using tiny-emitter to create your own event bus. That example shows how to create a global bus, but it seems your plugin just needs a local bus, which you could create like this:
// eventBus.js
import Emitter from 'tiny-emitter'
export function createEventBus() {
const emitter = new Emitter()
return {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args)
}
}
Then in your plugin, create a global with app.config.globalProperties, referring to the locally created event bus:
// myPlugin.js
import { createEventBus } from './eventBus'
export default {
install(app) {
const eventBus = createEventBus()
app.config.globalProperties.$modal = {
show (modal, params = {}) {
eventBus.$emit('show', modal, params)
},
$event: eventBus
}
}
}
And install it:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import myPlugin from './myPlugin'
createApp(App).use(myPlugin).mount('#app')
Also be aware that your slot usage in AppRegisterModal.vue needs to be updated to the latest syntax (v-slot or # shorthand):
<app-modal name="register">
<!--
<template slot="header">
-->
<template #header>
<!--
<template slot="body" slot-scope="{ params }">
-->
<template #body="{ params }">
</app-modal>
demo
I am very new to Laravel and Vuex, I have a simple array of post on my page.
test 1
test 2
test 3
I am trying to link the text on the AppPost.vue component and show the post that has been clicked on a new component (AppShowpost.vue) on the same page. I believe I have to get the post by id and change the state? any help would be good. Thank you.
when you click test 1 it will show "test 1" on a new component (AppShowpost.vue)
In side my store timeline.js, I belive I need to get the post by id and change the state ?
import axios from 'axios'
export default {
namespaced: true,
state: {
posts: []
},
getters: {
posts (state) {
return state.posts
}
},
mutations: {
PUSH_POSTS (state, data) {
state.posts.push(...data)
}
},
actions: {
async getPosts ({ commit }) {
let response = await axios.get('timeline')
commit('PUSH_POSTS', response.data.data)
}
}
}
My AppTimeline.vue component
<template>
<div>
<app-post
v-for="post in posts"
:key="post.id"
:post="post"
/>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapGetters({
posts: 'timeline/posts'
})
},
methods: {
...mapActions({
getPosts: 'timeline/getPosts'
})
},
mounted () {
this.getPosts()
}
}
</script>
My AppPost.vue component. I need to link the post.body to display the post in my AppShowpost.vue component.
<template>
<div class="w-full inline-block p-4">
<div class="flex w-full">
<p>
{{ post.body }}
</p>
</div>
</div>
</template>
<script>
export default {
props: {
post: {
required: true,
type: Object
}
}
}
</script>
My AppSowpost.vue component that needs to display the post that is clicked.
<template>
<div>
// Displaypost ?
</div>
</template>
<script>
export default {
// Get post from id ?
}
</script>
Okay you can create a new state in your vuex "current_state", asyou said, you can dispatch a mutation by passing the id to the vuex.
state: {
posts: [],
current_state_id : null
},
In your mutations
set_state_id (state, data) {
state.current_state_id = data;
}
On your app post.vue, you can set a computed property that watches the current state
computed: {
currentState() {
return this.$store.getters["timeline/current_state_id"];
}}
And create a watcher for the computed property to display the current id/post
watch: {
currentState: function(val) {
console.log(val);
},
Maybe this will help you. First I will recommend to use router-link. Read about router link here if your interested. It is very helpful and easy to use. But you will have to define the url and pass parameter on our vue-route(see bellow).
1.You can wrap your post.body in router-link as follow.
//With this approach, you don't need any function in methods
<router-link :to="'/posts/show/' + post.id">
{{ post.body }}
</router-link>
2. In your AppSowpost.vue component, you can find the post in vuex state based on url params as follow.
<template>
<div> {{ thisPost.body }} </div>
</template>
// ****************
computed: {
...mapState({ posts: state=>state.posts }),
// Let's get our single post with the help of url parameter passed on our url
thisPost() { return this.posts.find(p => p.id == this.$route.params.id) || {}; }
},
mounted() { this.$store.dispatch("getPosts");}
3. Let's define our vue route.
path: "posts/show/:id",
name: "showpost",
params: true, // Make sure the params is set to true
component: () => import("#/Components/AppShowPost.vue"),
Your Mutations should look as simple as this.
mutations: {
PUSH_POSTS (state, data) {
state.posts = data;
}
},
Please let me know how it goes.
I've been hunting and trying for the last handful of days but with no success.
I am trying to render a list of quotes to be displayed as a carousal on a login page.
I need to pull a list of quotes from a database which i have done. I then need to loop through the quotes and display them in the owl.carousel.
If i manually add the div.elements, it renders without a problem. when i add the element in a v-for loop, it does not display. Can someone please advise or guide me into the correct direction?
<template>
<carousel class="crsl" :autoplay="true" :nav="false" :items="1">
<div v-for="(item, index) in quotes" :key="item.id" v-text="item.quote"></div>
</carousel>
import carousel from 'vue-owl-carousel';
export default {
components: { carousel },
mounted() {
console.log('Component mounted.')
axios.post('api/quotes', {})
.then(response => {
this.quotes = response.data;
});
},
data: function () {
return {
quotes: null,
}
},
}
found a solution here
https://github.com/93gaurav93/v-owl-carousel/issues/16
My final code is as follows
<template>
<div v-if="quotes.length > 0">
<carousel :items="1" :autoplay="true" :nav="false" :dots="false">
<div v-for="(item, index) in quotes">
<div v-text="item.quote"></div>
</div>
</carousel>
</div>
<script>
import carousel from 'vue-owl-carousel';
export default {
components: { carousel },
data() {
return {
quotes: [],
};
},
mounted() {
axios.post('/api/quotes')
.then(resp => {
this.quotes = resp.data;
});
},
}
I am using Laravel 5.8 + Vue.js in my project.
Trying to get a single data from a controller but nothing is displaying.
I added the 12345 in the component to check if the component is working, 12345 is showing well.
controller
public function getSingleData($idx)
{
$paymentData = PaymentData::where('idx', $idx)->first();
return view('paydetail')->with('paymentData', $paymentData);
}
router
Route::view('/paylist', 'paylist')->name('paylist.view');
Route::get('/paylist/data', 'PaymentController#getPaymentData')->name('paylist');
Route::get('/paydetail/{idx}', 'PaymentController#getSingleData')->name('paydetail');
blade
#extends('layouts.default')
#section('content')
<div class="container">
<paydetail :idx="{{ $paymentData->idx }}"></paydetail>
app.js
Vue.component('paydetail', require('./components/Paydetail.vue').default);
Paydetail.vue
<template>
<div>
<h2>12345</h2>
<div v-for="val in paymentData">
<h2>{{ val.app_name }} </h2>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: [ 'idx' ],
data() {
return {
paymentData: [{}],
}
},
created() {
this.paymentData = this.getPayDetailData();
console.log(this.idx);
console.log("here");
},
methods: {
getPayDetailData() {
axios({
method: 'GET',
url: '/paydetail/'+ this.idx
}).then(
response => {
console.log(response)
return response
},
error => {
console.log(error)
}
)
},
},
}
</script>
The result of console.log(response) is weird. It shows the whole html document which I don't understand at all.
It shows like this.
{data: "<!DOCTYPE html>↵<html>↵ <head>↵ <meta ch…>↵<!-- For Datatable -->↵↵↵ </body>↵</html>↵", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
What did I wrong here?
I'm trying to implement modal windows with Vuejs.
The code below shows that after the user uploads the favorite photo,
then modal window appears, and photos which were uploaded so far and the newly registered photos are displayed
it will confirm when the user press the "confirm" button.
However, at present, data is not set in the modal window after fetching data with ajax after uploading.
How do I set the data in the modal window part?
<template>
<div>
<!-- upload -->
<div class="button__action">
<button type="button" #click="uploadData(originalData.image)">upload</button>
</div>
<!-- Modal window -->
<modal name="modal-view">
<div>
<div class="modal__box" v-if="modalList.list">
<img :src="modalList.list.url">
<p class="image__name">{{modalList.list.name}}</p>
</div>
<button type="button" #click="submit">Confirm</button>
</div>
</modal>
</div>
</template>
<script>
import { post } from './handler/api'
import { toFormat } from './handler/form'
export default {
props: {
originalData: {
type: Object,
required: true,
}
},
data: function(){
return {
modalList : {
list : [],
},
}
},
methods: {
showModal () {
this.$modal.show('modal-view');
},
uploadData() {
const form = toFormat({image: this.originalData.image})
post(`/api/upload/`, form)
.then((res) => {
if(res.data) {
Vue.set(this.$data, 'modalList', res.data.list);
this.$modal.show('modal-view');
}
})
.catch((err) => {
//error
})
},
submit() {
}
}
}
</script>
Try this:
uploadData() {
var vm = this;
post(`/api/upload/`, toFormat({image: this.originalData.image})).then(res => {
if(res.data) {
vm.modalList = res.data.list;
this.$modal.show('modal-view');
}
})
}