I need to change the {{message}} on the click of a button with a alert box. No alert box is showing and the message is also not changing.
I am new to vue world, the other examples are working but there is a problem with this file only.
I have used the directive "v-once" on the message tag inside the <h1> tag, the <h2> doesn't have "v-once".
Please reply me what I have done wrong in the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Tutorial | Directives</title>
<script src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
</div>
<button #click="rewrite" type="button" name="button" >Change</button>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue World',
intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
viewed: true,
},
methods: {
rewrite: function () {
alert('Button Clicked!'),
this.message = 'Bye vue World!!!',
},
},
});
</script>
</html>
The problem with your code is that you put the button outside of div#app so the Vue instance doesn't affect it. Just move the button to be inside div#app and it'll work
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
// move button into here
<button #click.prevent="rewrite" type="button" name="button">Change</button>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Tutorial | Directives</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
<button #click.prevent="rewrite" type="button" name="button">Change</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue World',
intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
viewed: true,
},
methods: {
rewrite: function() {
alert('Button Clicked!')
this.message = 'Bye vue World!!!'
},
},
});
</script>
</html>
Related
I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
I'm just beginning to learn view and am practicing using it, but I keep getting the errors "vue was used before it was defined" and "Vue is not defined". Ive uploaded what I have in my html and my js file.
var app = new Vue();
app({
el: '#app',
data: {
product: 'Socks'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue practice</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</body>
</html>
You just need to put those parameters into your Vue() constructor
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue practice</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</body>
</html>
I start to learn vuejs and I can't explain this bug. The vuejs mustache syntax doesn't work in this exemple :
the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>test mustache syntax</h1>
</header>
<section id="user-goal">
<h2>titre</h2>
<p>{{ test }}</p>
</section>
</body>
</html>
the js file
const app = Vue.createApp({
data() {
return {
test: 'bonjour'
};
}
});
app.mount('#user-goal');
Can someone tell me why i get this result?
I'm new to vue and have been trying to include a google sign in button into my webpage. However, there is an error that states that "gapi is undefined" in my mounted(). How do i fix this? I've also tried initializing gapi but I don't know where to put that.
<template>
<div id = "signin"><div class="g-signin2">Sign in with LFA Email</div></div>
</div>
</template>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
import UserDataService from "../services/UserDataService";
export default {
data(){
return {
emailAddress:"",
signedIn:false
};
},
methods:{
onSignIn(user){
const profile = user.getBasicProfile()
this.emailAddress =profile.getEmail()
console.log(this.emailAddress)
if(this.emailAddress.indexOf("#students.org")>-1){
UserDataService.create(this.emailAddress)
this.signedIn = true
}
else{
alert("Please sign in with an LFA Email Account")
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
this.signedIn=false
}
}
},
mounted() {
gapi.signin2.render('signin', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': this.onSuccess,
})
}
}
</script>
<style>
#import '../../public/stylesheet.css';
</style>
You can't put this tag <script src="https://apis.google.com/js/platform.js"></script> in Single File Component.
Put this tag in your public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>t-vue</title>
</head>
<body>
<noscript>
<strong>We're sorry but t-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://apis.google.com/js/platform.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
Besides that, you need also to remove the attributes async and defer. Because when you call the gapi variable in mounted the script didn't download yet.
The correct script is: <script src="https://apis.google.com/js/platform.js"></script>
PS: I create a minimal example that works for me, try this in your computer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button #click="test">Click Here</button>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
let app = new Vue({
el: '#app',
methods: {
test() {
console.log('method', gapi);
},
},
mounted() {
console.log('mounted', gapi);
},
});
</script>
</body>
</html>
Not sure if you still need help with this, but I had to explicitly assign the gapi variable I see in all these examples to window.gapi by doing this at the beginning of the Mounted() method:
let gapi = window.gapi
I got this template from this site: After trying out some templates, they were ok. But trying out this bot template am getting a blank html return on this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
document.getElementById("hello-world").innerHTML = content;
</script>
</body>
</html>
What could be the issue?
Regards
The template is working fine, the only issue here is that you need to remove following line
document.getElementById("hello-world").innerHTML = content;
I am not sure, why you have added this line. All the messages should be rendered via botui.message.add() method. BotUI will handle content insertion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
// document.getElementById("hello-world").innerHTML = content;
</script>
</body>
</html>