I'm struggling with vue event listner.
I can fire the mounted() method.
But I can't fire the on click method.
this is my vue component.
Could you help me??
Layout.vue
<template>
<div id="layout">
<div class="button">
<button #click="update">update1</button>
<button #click.native="update">update2</button>
</div>
</div>
</template>
<script>
export default {
mounted() {
alert("") //fired
},
methods: {
update() {
alert("") //not fired both of the buttons
},
},
}
</script>
======additional information=============
app.js
Vue.component('vue-layout', require('./views/Layout.vue').default);
html
<body>
<div id="app">
<vue-layout></vue-layout>
</div>
<script src="/js/app.js"></script>
</body>
Related
I'm trying to add some animations to my vuejs(v2)+nuxt site using GSAP. To do that I need to trigger some animations on scroll. Vue provides some handy javascript hooks for it but they seem to not be working in my case.
<template>
<div class="container-xxl">
<div class="row">
<div class="col-12">
<div class="text-center">
<transition #before-enter="beforeEnter" #enter="enter" #leave="leave">
<h1>Test Component</h1>
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TestComponent',
methods: {
beforeEnter (el) {
console.log('before enter')
},
enter (el, done) {
console.log('enter')
},
leave (el, done) {
console.log('leave')
}
}
}
</script>
When using JavaScript-only transitions, the done callbacks are required for the enter and leave hooks. Otherwise, the hooks will be called synchronously and the transition will finish immediately.
so on this project i was trying to make an image component to display an image from a string props.
here is my component code
this is the component
<template>
<div class="Img-grid">
<div class="container">
<div class="col">
<img :v-bind:src="recipeImage" alt="image-photo">
<p>{{recipeName}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImgGrd'
props: {
recipeImage: String,
recipeName: String
}
}
</script>
this is my where the component display
<template>
<div class="RecipeByYou">
<div class="container">
<ImgGrid recipeName="a" v-bind:recipeImage="imgUrl" />
</div>
</div>
</template>
<script>
import ImgGrid from '../components/Image_Grid.vue'
export default {
name: 'RecipeImage',
components: {
Header,
ImgGrid
},
data () {
return {
imgUrl: 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png'
}
}
}
am i doing anything wrong? because when i inspect the web element it shows this thing, so i was confuse where did i do wrong, is this the correct method?
<img data-v-366ed4fa="" v-bind:src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="image-photo">
change this code <img :v-bind:src="recipeImage" alt="image-photo"> to <img v-bind:src="recipeImage" alt="image-photo">.
or you can change <img :v-bind:src="recipeImage" alt="image-photo"> to <img :src="recipeImage" alt="image-photo">.
: is shorthand of v-bind, your code :v-bind:src="recipeImage" means v-bind:v-bind:src="recipeImage"
I am following this Package in vue.js and Laravel 5.6.7 to implement captcha.
https://github.com/DanSnow/vue-recaptcha#install
Component code in vue.js
<template>
<div>
<vue-recaptcha v-model="loginForm.recaptcha"
sitekey="My key">
</vue-recaptcha>
<button type="button" class="btn btn-primary">
Login
</button>
</div>
</template>
<script>
</script>
app.js code
import VueRecaptcha from 'vue-recaptcha';
Vue.use(VeeValidate);
Vue.component('vue-recaptcha', VueRecaptcha);
Question:
Is there any property for vue-recaptcha called required which can be passed to show the form validation message?
You can use a property (loginForm.recaptchaVerified below) to track if the recaptcha was verified and prevent submit + display a message if not:
JSFiddle demo: https://jsfiddle.net/acdcjunior/o7aca7sn/3/
Code below:
Vue.component('vue-recaptcha', VueRecaptcha);
new Vue({
el: '#app',
data: {
loginForm: {
recaptchaVerified: false,
pleaseTickRecaptchaMessage: ''
}
},
methods: {
markRecaptchaAsVerified(response) {
this.loginForm.pleaseTickRecaptchaMessage = '';
this.loginForm.recaptchaVerified = true;
},
checkIfRecaptchaVerified() {
if (!this.loginForm.recaptchaVerified) {
this.loginForm.pleaseTickRecaptchaMessage = 'Please tick recaptcha.';
return true; // prevent form from submitting
}
alert('form would be posted!');
}
}
})
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-recaptcha#latest/dist/vue-recaptcha.js"></script>
<div id="app">
<form v-on:submit.prevent="checkIfRecaptchaVerified">
<div>
<vue-recaptcha #verify="markRecaptchaAsVerified"
sitekey="6Le-wvkSAAAAAPBMRTvw0Q4Muexq9bi0DJwx_mJ-">
</vue-recaptcha>
</div>
Some other fields of the form here...
<br>
<button>Submit form</button>
<hr>
<div><strong>{{ loginForm.pleaseTickRecaptchaMessage }}</strong></div>
</form>
</div>
In a laravel 5.4 environment I want to render the text "Example" in the .panel-heading of Example.vue. After doing npm run watch I get the following Vue warn:
'Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.'
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
data: {
message: 'Example'
}
});
Example.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading" >{{ message }}</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.blade.php
<html>
<!-- ... -->
<body>
<div id="app">
<example></example>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Your Example.vue component doesn't have access to its parent's properties. You need to define message within the same scope of the component you are trying to use it in.
You can do this by adding message as a data property in your Example component:
// Example.vue script
export default {
data() {
return {
message: 'Example',
}
},
}
Or you can pass it in as a prop:
// Example.vue script
export default {
props: ['message'],
}
In your case, you would pass a value for the message prop like this:
// in app.blade.php
<example message="Example"></example>
Here's the documentation on Vue Component props.
VueJS component doesn't get cached or atleast reattached after navigation. On refresh or launch everything gets attached and rendered well but after navigating to another page then back. The First Component - Carousel - component in my case doesn't get rendered but the API call is made.
<template>
<div class="rel">
<div id="homeCarousel" class="owl-carousel owl-slider">
<div class="item" v-for="product in featured">
<div class="bg-holder top-area-half" >
<div class="bg-mask-lighten"></div>
<img class="bg-img" v-bind:src="product.feature_image_url">
<div class="hero-caption">
<div class="container">
<h3 class="hero-title">{{product.feature_title}}</h3>
<p class="hero-subtitle">{{product.feature_subtitle}}</p>
<a class="btn btn-white btn-ghost btn-lg hero-btn" href="#">Shop now</a>
</div>
</div>
</div>
</div>
</div>
<div id="hero-slider-nav" class="hero-slider-nav">
<div class="container">
<div class="pull-right"></div>
</div>
</div>
</div>
</template>
<style>
</style>
<script>
export default{
data(){
return{
featured:[]
}
},
ready(){
},
mounted(){
this.getFeaturedProducts();
},
components:{
},
methods: {
getFeaturedProducts: function () {
Vue.http.get('/api/product/filter/featured=1').then(
(response) => {
this.featured = response.body;
}
)
}
}
}
</script>
`
<template>
<div class="global-wrapper clearfix ">
<keep-alive>
<Carousel></Carousel>
</keep-alive>
//The rest of the code which is just importing the Component
I found out what i was doing wrong. I had a separate JS/JQuery file and on the document ready i was initializing an owl carousel by id #('homeCarousel').owlCarousel({}) . What worked was, since i had already bootstrapped owl carousel -> on the mounted lifecycle callback i was now targeting the element and making it an owl carousel.