In a vue page I added a ImageUpload component, following this tutorial: https://www.youtube.com/watch?v=kvNozA8M1HM
It works more or less. No errors, but it only shows my image and a ruler. I can zoom using the ruler, but it does not show boundaries, circle etc. It is completely different from the example in the tutorial...
It is buggy, so to say.
<template>
<div class="Image-Upload-wrapper Image-upload">
<p>
This is image upload wrapper component
</p>
<div id="croppie"> </div>
</div>
</template>
<script>
// uitleg over Croppie::https://www.youtube.com/watch?v=kvNozA8M1HM
import Croppie from 'croppie';
export default {
props:[
'imgUrl'
],
mounted(){
this.image = this.imgUrl // als component is mounted, this.image definieren, en daartmee croppie in..
this.setUpCroppie()
},
data(){
return{
image:null,
croppie:null
}
},
methods:{
setUpCroppie(){
let el = document.getElementById('croppie');
this.croppie = new Croppie(el, {
viewport:{width:200,height:200,type:'circle'},
boundary:{ width:220,height:220},
showZoomer:true,
enableOrientation: true
});
this.croppie.bind({
url:this.image
});
}
}
}
</script>
Is placed in parent as follows:
template>
<div>
<h2>Cards 1</h2>
<div class="form-group">
<input type="text" class="form-control" :placeholder="card.title" v-model="card.title">
</div>
<div class="form-group">
<textarea class="form-control" :placeholder="card.description" v-model="card.description">
</textarea>
</div>
<div id="preview" v-if="url" >
<h4> Preview</h4>
<ImageUpload :imgUrl="url"></ImageUpload>
<!-- <img class="img-circle" style="width:150px" :src="url" /> -->
</div>
<input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">
<button #click="editCard(currentSpelerCard)" class="btn btn-warning m-1" style="width:100px;color:black"> Save Card </button>
</div>
</template>
In my package.json I have:
"croppie": "^2.6.5",
in webpack mix I have:
mix.js('resources/js/app.js', 'public/js')
mix.vue();
mix.sass('resources/sass/app.scss', 'public/css');
I have a feeling that something is wrong with the installation of croppie.
Does anyone know what could be the problem here?
Googloing on I found the remark:
"#Since this package also depends on croppie.css you have to import it in your app.js import 'croppie/croppie.css'"
I added the following line to bootstrap.js:
import 'croppie/croppie.css';
Related
I have searched everywhere, and all answers I found only explain how to rename the public folder. In my case, the public folder is outside the Project folder:
basefolder/
Laravel/
public_html/
I have done all changes I found for the renaming folder, and all works except for vue.
In the webpack file i entered this:
mix.setPublicPath('../public_html/');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');
compiled, and it compiled the css and js file in the proper folder.
In my app.js i Declared this:
Vue.component('set-fav', require('./components/SetFavorite.vue').default);
and the file components/SetFavorite.vue exists and has its content...
<template>
<div>
<input type="image" src="/images/favorite.png" border="0" alt="Favorite" #click="setfavorite" />
</div>
</template>
<script>
export default {
props: ['photogId','galId','photoname'],
mounted() {
console.log('Component mounted.')
},
methods: {
setfavorite(){
axios.get('/' + this.photogId + '/' + this.galId + '/' + this.photoname + '/like')
.then(response => {
alert(response.data);
});
}
}
}
</script>
when i Load the page, i do not see the image. Instead in the developer console I see 2 error messages:
Uncaught SyntaxError: Cannot use import statement outside a module
and
app.js:38062 [Vue warn]: Unknown custom element: <set-fav> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
and if I look at the source of my page, it begins like this:
<script>
import SetFavorite from "../../js/components/SetFavorite";
export default {
components: {SetFavorite}
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
...
...
Now, relative to my index.php file, the path ../../js/components/SetFavorite does not exist.. the correct existing path would be ../Laravel/js/components/SetFavorite
What do I need to do in order to fix this?
Thank you
EDIT, code of view
#extends('layouts.client')
#section('content')
<div class="container">
#if($gallery->webgal == 1)
<div class="row d-flex justify-content-around pb-3">
<h1>{{$gallery->galname}}</h1>
</div>
<div class=" row pt-1 card-deck">
#foreach($gallery->photos as $photo)
<div class="col-12 col-md-6 col-sm-12 p-1 " >
<div class="w-100 d-flex shadow justify-content-between card" style="background-color: lightgray">
<div class="w-100 m-0 p-0" style="width: 350px; height: 350px;">
<a data-fancybox="gallery" href="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/wm/wm_{{$photo->filename}}">
<img class="card-img" src="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/thumb/thumb_{{$photo->filename}}" style="
width:100%;
height:100%;
object-fit: scale-down;">
</a>
</div>
<div class="card-footer w-100 d-flex justify-content-around" style="font-size: smaller;">
<div class="d-flex justify-content-around w-100">
<div>
{{$photo->filename}}
</div>
<div>
<button>Download (Hi-Res)</button>
</div>
<div>
<button>Download (Social Res)</button>
</div>
<div>
<set-fav photogId="{{$gallery->user->phcode}}" galId="{{$gallery->galcode}}" photoId="{{$photo->filename}}" name="fav{{$photo->id}}"></set-fav>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
#else
<div class="row d-flex justify-content-around pb-3">
<h1>Nothing here... :)</h1>
</div>
#endif
</div>
#endsection
You have 2 issues:
You should alias your components directory thanks to Webpack, by the way it will always use an absolute path
In your webpack.mix.js:
mix.webpackConfig({
resolve: {
extensions: [ '.js', '.vue' ],
alias : { '#': `${ __dirname }/resources` },
},
output: {
publicPath : '/',
chunkFilename: 'js/[name].[chunkhash].js',
},
});
import SetFavorite from '#/js/components/SetFavorite';
If the last sample is the source code of your HTML document, it doesn't work because import and export are unknown to a web browser. You have to do it from an asset, build it with Laravel Mix and include the output to your HTML thanks to
<script type="text/javascript" src="{{ mix(...) }}"></script>
in my laravel project i have used Vuejs and Vuex.when page is loaded or refreshed then component is displayed but when i change tab and goto previous tab then component disappear.And when i goto next page and return back everything is fine.
below is component featured.vue
<template>
<div class="featured_slider slider">
<h4>featured</h4>
<div class="featured_slider_item" v-for="product in getFeaturedProducts">
<div class="border_active"></div>
<div class="product_item discount d-flex flex-column align-items-center
justify-content-center text-center">
<div class="product_image d-flex flex-column align-items-center justify-
content-center">
<img :src="'/Uploads/Products/'+product.id+'/cropped_'+product.image.name"
:alt="product.image.name"></div>
<div class="product_content">
<div class="product_price discount">Rs.{{product.price_old}}<span>Rs.
{{product.price_new}}</span></div>
<div class="product_name">
<div>{{product.title}}</div>`
</div>
<div class="product_extras">
<div class="product_color">
<input type="radio" checked
name="product_color"style="background:#b19c83">
<input type="radio" name="product_color"
style="background:#000000">
<input type="radio" name="product_color"
style="background:#999999">
</div>
<button class="product_cart_button">Add to Cart</button>
</div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
products:[]
}
},
computed:{
getFeaturedProducts(){
return this.$store.getters.featuredProducts;
}
},
created() {
return this.$store.dispatch('featuredProducts');
}
}
</script>
below is state.js
export default {
featuredProducts:[],
onSale:[]
}
below is getters.js
export const featuredProducts= state =>{
//console.log(state);
return state.featuredProducts
};
export const onSale= state =>{
//console.log(state);
return state.onSale
};
below is mutations.js
export const featuredProducts=(state,responseData)=>{
state.featuredProducts=responseData;
// console.log(responseData)
};
export const onSale=(state,responseData)=>{
state.onSale=responseData;
// console.log(responseData)
};
below is actions.js
import {sendGet} from "../../../utils/request";
export const featuredProducts =context=>{
sendGet('/product/products').then(response=>{
context.commit('featuredProducts',response.data.data)
});
};
export const onSale =context=>{
sendGet('/product/onsale').then(response=>{
context.commit('onSale',response.data.data)
});
};
Considering general file structure 'public>js>app.js', app.js
which include all compiled js, the vue dependencies and attach vue instance to to
the body of the page, your blade, eg index.blade.php you might have something like ::
<script type="text/javascript" src="js/app.js"></script>
In your blade template, change it into something like this, considering same file structure:
<script type="text/javascript" src="{{url('js')}}/app.js"></script>
I created a simple real-time chat application using vue js in laravel.
I am having a problem with the automatic scroll of the div when there is a new data.
What I want is the div to automatically scroll down to the bottom of the div when there is a new data.
Here is my code so far.
Chat.vue file
<template>
<div class="panel-block">
<div class="chat" v-if="chats.length != 0" style="height: 400px;" id="myDiv">
<div v-for="chat in chats" style="overflow: auto;" >
<div class="chat-right" v-if="chat.user_id == userid">
{{ chat.chat }}
</div>
<div class="chat-left" v-else>
{{ chat.chat}}
</div>
</div>
</div>
<div v-else class="no-message">
<br><br><br><br><br>
There are no messages
</div>
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"></chat-composer>
</div>
</template>
<script>
export default {
props: ['chats','userid','adminid'],
}
</script>
ChatComposer.vue file
<template>
<div class="panel-block field">
<div class="input-group">
<input type="text" class="form-control" v-on:keyup.enter="sendChat" v-model="chat">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" v-on:click="sendChat">Send Chat</button>
</span>
</div>
</div>
</template>
<script>
export default{
props: ['chats','userid','adminid'],
data() {
return{
chat: ''
}
},
methods: {
sendChat: function(e) {
if(this.chat != ''){
var data = {
chat: this.chat,
admin_id: this.adminid,
user_id: this.userid
}
this.chat = '';
axios.post('/chat/sendChat', data).then((response) => {
this.chats.push(data)
})
this.scrollToEnd();
}
},
scrollToEnd: function() {
var container = this.$el.querySelector("#myDiv");
container.scrollTop = container.scrollHeight;
}
}
}
</script>
I am passing a div id from the Chat.vue file to the ChatComposer.vue file.
As you can see in the ChatComposer.vue file there is a function called scrollToEnd where in it gets the height of the div id from Chat.vue file.
When the sendchat function is triggered i called the scrollToEnd function.
I guess hes not getting the value from the div id because I am getting an error - Cannot read property 'scrollHeight' of null.
Any help would be appreciated.
Thanks in advance.
the scope of this.$el.querySelector will be limited to only ChatComposer.vue hence child component can not able to access div of parent component #myDiv .
You can trigger event as below in ChatComposer
this.$emit('scroll');
In parent component write ScollToEnd method and use $ref to assign new height
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid" #scroll="ScollToEnd"></chat-composer>
..
I am learning vue+laravel. I want to pass value from one component to other component? I have used vue router for routing.
Here is the code for first and second component.
SelectPerson.vue
<template>
......
<div>
<input type="number" class="form-control" name="numberOfPersons" placeholder="Enter number of persons here" **v-model="inputPersons"**>
<br>
**<SelectTimeSlot v-bind:numberOfPersons="inputPersons"></SelectTimeSlot>**
</div>
<div>
<button class="btn btn-default float-right mt-2" v-on:click="selectTimeSlots">Next</button>
</div>
......
</template>
<script>
import SelectTimeSlot from './SelectTimeSlot.vue'
export default{
props:['numberOfPersons'],
data(){
return{
**inputPersons:0**
}
},
methods:{
selectTimeSlots(){
this.$router.push({name:'SelectTimeSlot'});
}
}
}
</script>
second component
SelectTimeSlot.vue
<template>
<h5>Welcome, You have selected **{{numberOfPersons}}** persons.</h5>
</template>
Can anybody help me do it?
To pass data from one component to other component, you need to use props:
First component:
<second-component-name :selectedOption="selectedOption"></second-component-name>
<script>
export default {
components: {
'second-component-name': require('./secondComponent.vue'),
},
data() {
return {
selectedOption: ''
}
}
}
</script>
Second Component:
<template>
<div>
{{ selectedOption }}
</div>
</template>
<script>
export default {
props: ['selectedOption']
}
</script>
Please visit this link.
Hope this is helpful for you!
Say I have a page with this HTML.
<div class="select-all">
<input type="checkbox" name="all_select" id="all_select">
<label #click="checkchecker" for="all_select"></label>
</div>
the function checkchecker is called in my methods
checkchecker() {
this.checker = !this.checker
}
This will show or hide my div on that page like this
<div v-show="checker === true" class="select-all-holder">
<button>Select All</button>
</div>
Now if I also want to toggle another div which is inside my child
component on that page I will pass the value like this.
<div class="content-section clearfix">
<single-product :checkers="checker"></single-product> //This is calling my child component
</div>
Now in my Child component I will have a prop declared like this
checkers: {
type: String,
default: false,
},
This is how I will write my div in my child component
<div v-show="checkers === true" class="select-holder clearfix">
<input type="checkbox" class="unchecked" name="single_select" id="1">
</div>
I need to use Bootstrap Datepicker with Angular 2. So I created a component as follows
import {Component, ElementRef, OnInit} from '#angular/core';
declare var $: any;
#Component({
templateUrl: 'app/views/daily-reports.html'
})
export class DailyReportsComponent implements OnInit {
constructor(private elRef: ElementRef) {}
ngOnInit(): void {
$('#daily-reports').datetimepicker();
}
}
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='daily-reports'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
In my index.html file I have all the files needed - js libraries and css files but I get the error
TypeError: Cannot read property 'addClass' of undefined
When I try to use the same code without Angular I works correctly as usual. Is there a way to fix the problem or can anybody show me how to use this plugin in Angular2
You have to put that initialization in ngAfterViewInit, because the DOM is not rendered yet in ngOnInit, so the selector in your JQuery will not be found and thus return undefined.
ngAfterViewInit(): void {
$('#daily-reports').datetimepicker();
}
use declare var jQuery:any; then in ngAfterViewInit add:
jQuery(this.el.nativeElement).find('div[id="daily-reports"]').datetimepicker({format: 'LT'})