I have a minimal Vue app:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta http-equiv='x-ua-compatible' content='ie=edge'>
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<!--3. Create the Vue instance-->
<script>
window.onload = function(){
new Vue({
el: '#app',
data: {
},
template: ''
})
}
</script>
</head>
<body>
<div id='app'>
</div>
</body>
</html>
and I want to show the date picker from https://vcalendar.io/examples/datepickers.html#button-dropdown but is only specified as template.
What are the steps to display that date picker inside my application?
new Vue({
el: '#app',
data: () => ({
selectedDate: null
}),
template: `
<div>
<v-date-picker class="inline-block" v-model="selectedDate">
<template v-slot="{ inputValue, togglePopover }">
<div class="flex items-center">
<button #click="togglePopover()">
Pick date
</button>
<input
:value="inputValue"
readonly
/>
</div>
</template>
</v-date-picker>
</div>
`
})
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<div id='app'>
</div>
Related
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 have a SPA using Vue and Vuetify. One of my Vuetify text fields needs to have a anchor tag in the label. The link appears but is not clickable.
Here is an HTML Fiddle
Here is a basic demo of my problem
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-text-field
label="Product Code"
placeholder="Product Code">
<template #label>
<h3>Product Code : (Find the product code
here)
</h3>
</template>
</v-text-field>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
</html>
Update
I've notice in the vuetify CSS there is pointer-events: none; ... seems that that is preventing the click event.
You're right, you link inherit of the style applied on the H3 parent. So you just have to add a style tag to redefine this like :
<style>
.v-text-field .v-label a{pointer-events:all;}
</style>
How can I initialize new Vue instance, mount it to existing dom element, and use this element's html as component's (or app's) content?
Here is an example project https://codesandbox.io/s/white-darkness-f3v80
<div id="app">
<p>This is slot text from index.html</p>
<template slot="foo">Also should be parsed as named slot</template>
</div>
Element div#app (index.html) may contain default slot, or other kind of slots (scoped etc). And App.vue should parse this html into relevant slots.
Try something like this:
<!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">
<div>
<any-component>
<p>This is slot text from index.html</p>
<template v-slot:foo>
Also should be parsed as named slot
</template>
</any-component>
</div>
</div>
<script>
Vue.component('any-component', {
template: `
<div>
<slot name="default"></slot>
<slot name="foo"></slot>
</div>`,
});
new Vue({
el: '#app',
data() {
return {};
},
});
</script>
</body>
</html>
Are you looking for it?
<labeledinput id="username">Username: </labeledinput>
Will render like:
<div><label for="username">Username: </label><input type="text" id="username"></div>
<div id="app">
<labeledinput id="username">Username: </labeledinput>
</div>
<script>
var vm = new Vue({
el: '#app'
});
// Example case
console.log(document.getElementById("app").innerHTML);
</script>
I know this is a very stupid question. but I can't get a concept of Vue.js
Thanks,
The way more simple to create a component is:
<!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">
<div>
<label-input v-model="username">
<span>Username</span>
</label-input>
<span>Username is {{ username }}</span>
</div>
</div>
<script>
Vue.component('label-input', {
props: ['value'],
template: `
<div>
<label>
<slot></slot>
<input type="text" :value="value" #input="$emit('input', $event.target.value)" />
</label>
</div>`,
});
new Vue({
el: '#app',
data() {
return {
username: '',
};
},
});
</script>
</body>
</html>
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>