I have made a form component (CreateDocument) in Nuxt. Inside this component i made also an autocomplete (AutoCompleteFilters).
When I hit enter inside the autocomplete component, also the CreateDocument is listening to the enter key. But I only want that a specific input field is listing to the enter key event.
This is the CreateDocument component:
<template>
<div>
<Notification :message="notification" v-if="notification"/>
<form method="post" #submit.prevent="createDocument">
<div class="create__document-new-document">
<div class="create__document-new-document-title">
<label>Titel</label>
<input
type="text"
class="input"
name="title"
v-model="title"
required
>
</div>
<div class="create__document-new-document-textarea">
<editor
apiKey="nothing"
v-model="text"
initialValue=""
:init="{
height: 750,
width: 1400
}"
>
</editor>
</div>
<div class="create__document-new-document-extra-info">
<div class="create__document-new-document-tags">
<label>Tags</label>
<AutoCompleteFilters/>
</div>
<div class="create__document-new-document-clients">
<label>Klant</label>
<input
type="text"
class="input"
name="client"
v-model="client"
required
>
</div>
</div>
<Button buttonText="save" />
</div>
</form>
</div>
</template>
<script>
import Notification from '~/components/Notification'
import Editor from '#tinymce/tinymce-vue'
import Button from "../Button";
import { mapGetters, mapActions } from 'vuex'
import AutoCompleteFilters from "./filters/AutoCompleteFilters";
export default {
computed: {
...mapGetters({
loggedInUser: 'loggedInUser',
})
},
middleware: 'auth',
components: {
Notification,
Button,
editor: Editor,
AutoCompleteFilters
},
data() {
return {
title: '',
text: '',
tags: '',
client: '',
notification: null,
}
},
methods: {
...mapActions({
create: 'document/create'
}),
createDocument () {
const documentData = {
title: this.title,
text: this.text,
tags: this.tags,
client: this.client,
userId: this.loggedInUser.userId
};
this.create(documentData).then((response) => {
this.notification = response;
this.title = '';
this.text = '';
this.tags = '';
this.client= '';
})
}
}
}
</script>
And this is the AutoCompleteFilters component:
<template>
<div class="autocomplete">
<input
type="text"
id="my-input"
#input="onChange"
v-model="search"
#keydown.down="onArrowDown"
#keydown.up="onArrowUp"
#keydown.enter="onEnter"
/>
<ul
v-show="isOpen"
class="autocomplete-results"
>
<li
v-for="result in results"
:key="results.id"
class="autocomplete-result"
#click="setResult(result.name)"
:class="{ 'is-active': results.indexOf(result) === arrowCounter }"
>
{{ result.name }}
</li>
</ul>
</div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
data() {
return {
isOpen: false,
results: false,
search: '',
arrowCounter: 0,
filter: null,
position: 0
};
},
methods: {
...mapActions({
getFilterByCharacter: 'tags/getTagsFromDb'
}),
onChange(e) {
this.isOpen = true;
this.position = e.target.selectionStart;
},
setResult(result) {
this.search = result;
this.isOpen = false;
},
getResults(){
this.getTagsByValue(this.search).then((response) => {
this.results = response;
});
},
async getTagsByValue(value){
const filters = {autocompleteCharacter : value};
return await this.getFilterByCharacter(filters);
},
onArrowDown() {
if (this.arrowCounter < this.results.length) {
this.arrowCounter = this.arrowCounter + 1;
}
},
onArrowUp() {
if (this.arrowCounter > 0) {
this.arrowCounter = this.arrowCounter - 1;
}
},
onEnter(evt) {
this.search = this.results[this.arrowCounter].name;
this.isOpen = false;
this.arrowCounter = -1;
}
},
watch: {
search: function() {
this.getResults();
}
},
};
</script>
<style>
.autocomplete {
position: relative;
}
.autocomplete-results {
padding: 0;
margin: 0;
border: 1px solid #eeeeee;
height: 120px;
overflow: auto;
width: 100%;
}
.autocomplete-result {
list-style: none;
text-align: left;
padding: 4px 2px;
cursor: pointer;
}
.autocomplete-result.is-active,
.autocomplete-result:hover {
background-color: #4AAE9B;
color: white;
}
</style>
Just as you did in your form to avoid "natural" form submit and replace it with a custom action:
#submit.prevent="createDocument"
... you have to preventDefault the "natural" event that submits the form when you press Enter while focusing the form.
To do so, just add .prevent to your events in the template:
#keydown.down.prevent="onArrowDown"
#keydown.up.prevent="onArrowUp"
#keydown.enter.prevent="onEnter"
Related
My goal is to get tooltip box popping up on each incorrect or empty input field when pressing 'Save' button.
I managed to display tooltip boxes by pressing 'Save' button, but when I input correct text (numbers), the tooltip box doesn't hide, but shows 'false' tooltip. How to hide tooltips completely on correct input?
full code: https://jsfiddle.net/a8bnp6m4/1/
var productForm = Vue.createApp ({})
productForm.component('custom-form', {
props: {
modelValue: {
type: String,
default: ''
},
},
components: ['status-bar', 'tooltips'],
template: `
<button v-on:click="submitProduct">Save</button>
<h1>Product Add</h1>
<div class="lines">
<label>SKU<input type="text" id="sku" v-model="this.product.sku" placeholder="ID"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.sku)" />
<label>Name<input type="text" id="name" v-model="this.product.name" placeholder="Please, provide name"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.name)" />
<label>Price<input type="text" id="price" v-model="this.product.price" placeholder="Please, provide price"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.price)" />
</div>
` ,
data: function() {
return {
product: {
sku: null,
name: null,
price: null,
},
options: ['DVD', 'Book', 'Furniture'],
selected: 'DVD',
tooltipText: {
onSubmit: 'Please, submit required data',
onType: 'Please, provide the data of indicated type',
show: false
}
}
},
computed:{
model:{
get(){ return this.modelValue },
set(v){ this.$emit('update:modelValue',v)}
}
},
methods:{
updateValue: function () {
return this.$emit('sendData')
},
submitProduct: function(){
for(var i in this.product){
this.showTooltip(this.product[i])
if(this.product[i]==null){
this.tooltipText.show = true
//this.product[i]=null
}
}
},
showData: function(){
//console.log(this.product.sku)
return JSON.stringify(this.product)
},
showTooltip: function(v){
if(v == null){ return this.tooltipText.onSubmit }
else if(!Number.isInteger(parseInt(v))){ return this.tooltipText.onType }
else { return false }
},
created() {
this.showData()
}
}
})
productForm.component ('tooltips', {
template: `
<div class="tooltip" :tooltip="tooltip" :showTooltip="showTooltip">
<span class="tooltiptext">{{tooltip}}</span>
</div>
`
})
const vm = productForm.mount('#product_form')
Today in about 10 minutes with clear head I solved my problem by replacing 'v-if' content with this.tooltipText.show && showTooltip(this.product.sku)!=false in my custom tooltip tag. :)
I just forgot to add an argument this.product.sku to showTooltip function.
full code: https://jsfiddle.net/amwfcv2o/
<label>SKU<input type="text" id="sku" v-model="this.product.sku" placeholder="ID"></label>
<tooltips v-if="this.tooltipText.show && showTooltip(this.product.sku)!=false" :tooltip="this.showTooltip(this.product.sku)" />
showTooltip: function(v){
if(v == null) { return this.tooltipText.onSubmit }
else if(!Number.isInteger(parseInt(v))) { return this.tooltipText.onType }
else { return false }
}
}
})
I suspect issue is with this.tooltipText.show && showTooltip!=false".
Can you try changing it to this.tooltipText.show && showTooltip"
Try without this in template and pass field in v-if showTooltip:
<label>SKU<input type="text" id="sku" v-model="product.sku" placeholder="ID"></label>
<tooltips v-if="tooltipText.show && showTooltip(product.sku)" :tooltip="showTooltip(product.sku)" />
...
Pls check following snippet:
var productForm = Vue.createApp ({})
productForm.component('custom-form', {
props: {
modelValue: {
type: String,
default: ''
},
},
components: ['status-bar', 'tooltips'],
template: `
<button v-on:click="submitProduct">Save</button>
<h1>Product Add</h1>
<div class="lines">
<label>SKU<input type="text" id="sku" v-model="product.sku" placeholder="ID"></label>
<tooltips v-if="tooltipText.show && showTooltip(product.sku)" :tooltip="showTooltip(product.sku)" />
<label>Name<input type="text" id="name" v-model="product.name" placeholder="Please, provide name"></label>
<tooltips v-if="tooltipText.show && showTooltip(product.name)" :tooltip="showTooltip(product.name)" />
<label>Price<input type="text" id="price" v-model="product.price" placeholder="Please, provide price"></label>
<tooltips v-if="tooltipText.show && showTooltip(product.price)" :tooltip="showTooltip(product.price)" />
</div>
` ,
data: function() {
return {
product: {
sku: null,
name: null,
price: null,
},
options: ['DVD', 'Book', 'Furniture'],
selected: 'DVD',
tooltipText: {
onSubmit: 'Please, submit required data',
onType: 'Please, provide the data of indicated type',
show: false
}
}
},
computed:{
model:{
get(){ return this.modelValue },
set(v){ this.$emit('update:modelValue',v)}
}
},
methods:{
showSelected: function(){
//return console.log(this.selected)
},
updateValue: function () {
return this.$emit('sendData')
},
submitProduct: function(){
for(var i in this.product){
this.showTooltip(this.product[i])
if(this.product[i]==null){
this.tooltipText.show = true
//this.product[i]=null
}
}
if (this.tooltipText.show == false){
//window.location.href = '../';
}
//console.log(this.product)
//return this.postData(this.product)
},
showData: function(){
//console.log(this.product.sku)
return JSON.stringify(this.product)
},
showTooltip: function(v){
if(v == null){ return this.tooltipText.onSubmit }
else if(!Number.isInteger(parseInt(v))){ return this.tooltipText.onType }
else { return false }
},
created() {
this.showData()
}
}
})
productForm.component ('tooltips', {
props: ['tooltip', 'showTooltip'],
//data: function(){
// return {
// tooltipText: this.tooltipText.onType
// }
//},
template: `
<div class="tooltip" :tooltip="tooltip" :showTooltip="showTooltip">
<span class="tooltiptext">{{tooltip}}</span>
</div>
`
})
const vm = productForm.mount('#product_form')
<!DOCTYPE html>
<html>
<head>
<title>scandiweb task</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link href="../styles.css" rel="stylesheet" type="text/css" media="all">
<!-- <script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script> -->
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<style>
div input {
display:inline-block;
justify-content:space-between;
align-items:center;
border:3px solid black;
margin:10px;
padding:10px;
}
div label{
display:block;
}
.tooltip {
position: relative;
display: inline;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
position: absolute;
width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
margin-left:300px;
z-index: 1;
visibility: visible;
}
</style>
<div id="product_form" v-cloak>
<custom-form>
</custom-form>
</div>
</body>
</html>
I've got the following problem, while reading in a File and reaching it to the Parent Component.
First I've got an FileInput on the FileReaderComponent, when File is Changed it sends an emit('change', file.content).
The top Component gets the file.content and sets it as the Input Prop of the FileViewerComponent.
As so far, it works as expected. But when I add a second FileReaderComponent, which Content should be displayed in the second FileViewerComponent.
But it always uses the #change from the first FileReaderComponent.
I'm very new to Vue. I build an minimal example to show:
Same behavior. When I use the Second FileReaderComponent it should put data into readerOutput2 but it puts data into readerOutput1 for some reason.
I can't figure out what I did wrong.
App.vue
<template>
<!-- <img alt="Vue logo" src="./assets/lpdLogo.svg" style="width: 100px; fill: green;"> -->
<FileReaderComponent #change="data.readerOutput1 = $event"/>
<FileViewerComponent v-model:input="data.readerOutput1"/>
<FileReaderComponent #change="data.readerOutput2 = $event"/>
<FileViewerComponent v-model:input="data.readerOutput2"/>
</template>
<script>
import FileReaderComponent from './components/FileReaderComponent.vue';
import FileViewerComponent from './components/FileViewerComponent.vue';
import { reactive } from 'vue';
export default {
name: 'App',
components: {
FileReaderComponent,
FileViewerComponent
},
setup () {
const data = reactive({
readerOutput1: '',
readerOutput2: ''
});
function log(toLog) {
console.log(toLog);
}
return { log, data }
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
FileReaderComponent.vue
<template>
<div id="fileUploadComponent" class="inline-flex items-center p-2 rounded border-2 border-yellow-500 m-1">
<input type='file' id="fileInput" name="fileInput" #change="fileUploadChange()" ref="fileInput" class="hidden"/>
<label for="fileInput" class="h-10 w-40 rounded text-gray-300 dark:text-gray-400 bg-gray-700 hover:bg-gray-500 text-xs" style="line-height: 2.5rem">
<span class="block text-center w-full">Datei öffnen</span></label>
<span id="filenamefield" class="inline-block m-2 text-gray-700 dark:text-gray-300">{{file.name}}</span>
</div>
</template>
<script>
import {reactive} from 'vue';
export default {
name: 'FileReaderComponent',
emits: ['inFocus', 'submit', 'change'],
props: {
input: {
type: String,
required: false,
},
},
methods : {
setContent(content) {
console.log('FileUpload, set Content', content)
this.file.content = content;
this.$emit('change', content);
},
fileUploadChange() {
console.log('fileUploadChange triggered');
this.file.input = this.$refs.fileInput.files[0];
this.file.name = this.file.input.name;
let file = this.file.input;
let parent = this;
parent.setContent('Content Loading')
function onloadevent(evt) {
parent.setContent(evt.target.result);
}
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
onloadevent(evt);
}
reader.onerror = function () {
onloadevent('An Error occurred while reading File');
}
}
}
},
setup(props, {emit}) {
const file = reactive({
name: 'Keine Ausgewählt',
input: Element,
content: String,
})
return {file}
}
}
</script>
<style scoped>
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile+label {
font-weight: 700;
display: inline-block;
}
input:checked+svg {
display: block;
}
</style>
FileViewerComponent
<template>
<div id="fileViewerComponent" class="inline-flex items-center p-2 rounded border-2 border-yellow-500 m-1">
<h3>Input:</h3>
<div id="view">
{{ input }}
</div>
</div>
</template>
<script>
import {reactive} from 'vue';
export default {
name: 'FileViewerComponent',
emits: ['inFocus', 'submit', 'change'],
props: {
input: {
type: String,
required: false,
},
},
methods : {
},
setup(props, {emit}) {
const file = reactive({
name: 'Keine Ausgewählt',
input: Element,
content: String,
})
return {file}
}
}
</script>
<style scoped>
</style>
Finally i got an Solution.
The Problem was caused by the FileInput label pointing to id="fileInput" wich is the input. But when the input is 2 times rendered, the label accesses the first found id="fileInput".
My Solution:
FileUploadComponent.vue
I had to reach an ID to the Component an use it for the Input ID and the label for
<template>
<div id="fileUploadComponent" class="inline-flex items-center p-2 rounded border-2 border-yellow-500 m-1">
<input type='file' v-bind:id="id" name="fileInput" #change="fileUploadChange()" ref="fileInput" class="hidden"/>
<label v-bind:for="id" class="h-10 w-40 rounded text-gray-300 dark:text-gray-400 bg-gray-700 hover:bg-gray-500 text-xs" style="line-height: 2.5rem">
<span class="block text-center w-full">Datei öffnen</span></label>
<span id="filenamefield" class="inline-block m-2 text-gray-700 dark:text-gray-300">{{file.name}}</span>
</div>
</template>
<script>
import {reactive} from 'vue';
export default {
name: 'FileReaderComponent',
emits: ['inFocus', 'submit', 'change'],
props: {
input: {
type: String,
required: false,
},
id : {
type: Number,
required: false,
}
},
methods : {
setContent(content) {
console.log('FileUpload, set Content', content)
this.file.content = content;
this.$emit('change', content);
},
fileUploadChange() {
console.log('fileUploadChange triggered');
this.file.input = this.$refs.fileInput.files[0];
this.file.name = this.file.input.name;
let file = this.file.input;
let parent = this;
parent.setContent('Content Loading')
function onloadevent(evt) {
parent.setContent(evt.target.result);
}
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
onloadevent(evt);
}
reader.onerror = function () {
onloadevent('An Error occurred while reading File');
}
}
}
},
setup(props, {emit}) {
const file = reactive({
name: 'Keine Ausgewählt',
input: Element,
content: String,
})
return {file}
}
}
</script>
<style scoped>
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile+label {
font-weight: 700;
display: inline-block;
}
input:checked+svg {
display: block;
}
</style>
I have displayed a list of images with some information. I want those images to be clickable. And when clicked it should show a div with saying "HI!!". I have been trying to add a variable as show:true in Vue data and tried to build some logic that show becomes false when clicked. But I have not been able to achieve it.
Below is the sample code:
template>
<div>
<h1>SpaceX</h1>
<div v-for="launch in launches" :key="launch.id" class="list" #click="iclickthis(launch)">
<div ><img :src="launch.links.patch.small" alt="No Image" title={{launch.name}} /></div>
<div>ROCKET NAME: {{launch.name}} </div>
<div>DATE: {{ launch.date_utc}} </div>
<div>SUCCESS: {{ launch.success}} </div>
<div>COMPLETENESS: {{ launch.landing_success}} </div>
</div>
<!-- <v-model :start="openModel" #close="closeModel" /> -->
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'SpaceXTimeline',
components: {
},
data: () => ({
launches : [],
openModel : false,
show : true,
}),
methods: {
iclickthis(launch) {
// this should load a model search v-model / bootstrap on vue npm install v-model
console.log(launch.name + " is launched");
console.log("DETAILS: "+ launch.details);
console.log("ROCKET INFO: "+ launch.links.wikipedia);
console.log("CREW DETAILS: "+ launch.crew);
console.log("Launchpad Name: "+ launch.launchpad);
this.openModel = true;
},
closeModel () {
this.openModel = false;
}
},
async created() {
const {data} = await axios.get('https://api.spacexdata.com/v4/launches');
data.forEach(launch => {
this.launches.push(launch);
});
}
};
</script>
<style scoped>
.list {
border: 1px solid black;
}
</style>
Thanks, and appreciate a lot.
v-model is a binding and not an element, unless you've named a component that? Is it a misspelling of "modal"?
Either way, sounds like you want a v-if:
<v-model v-if="openModel" #close="closeModel" />
Example:
new Vue({
el: '#app',
components: {},
data: () => ({
launches: [],
openModel: false,
show: true,
}),
methods: {
iclickthis(launch) {
// this should load a model search v-model / bootstrap on vue npm install v-model
console.log(launch.name + ' is launched');
console.log('DETAILS: ' + launch.details);
console.log('ROCKET INFO: ' + launch.links.wikipedia);
console.log('CREW DETAILS: ' + launch.crew);
console.log('Launchpad Name: ' + launch.launchpad);
this.openModel = true;
},
closeModel() {
this.openModel = false;
},
},
async created() {
const {
data
} = await axios.get('https://api.spacexdata.com/v4/launches');
data.forEach(launch => {
this.launches.push(launch);
});
},
})
Vue.config.productionTip = false;
Vue.config.devtools = false;
.modal {
cursor: pointer;
display: flex;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
padding: 20px 0;
background: rgba(255, 255, 255, 0.5);
}
img {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app">
<h1>SpaceX</h1>
<div v-for="launch in launches" :key="launch.id" class="list" #click="iclickthis(launch)">
<div>
<img :src="launch.links.patch.small" alt="No Image" :title="launch.name" />
</div>
<div>ROCKET NAME: {{ launch.name }}</div>
<div>DATE: {{ launch.date_utc }}</div>
<div>SUCCESS: {{ launch.success }}</div>
<div>COMPLETENESS: {{ launch.landing_success }}</div>
</div>
<div v-if="openModel" #click="closeModel" class="modal">
MODAL
</div>
</div>
I have a vue app which can add and edit todos in the local storage, what i am trying to do now is create a search for the item topic which is saved inside of the key value todos in the local storage by using computed in the code in order to filter for the data.
<div id="app">
<br>
<br>
<input type="text" v-model="search" style=" margin: 20px; padding: 10px;">
<br>
<ul>
<li v-for="(todo, index) in todos" style="border:2px solid blue; margin-bottom: 10px; width: 15%; position: relative; padding: 10px;">
<span v-if="todo"> topic:{{todo.topic}}<br> price:{{todo.price}}<br> loc:{{todo.place}}<br> time:{{todo.time_length}} </span>
<br>
<br>
</li>
</ul>
</div>
<script>
Vue.use(VueLocalStorage);
new Vue({
el: '#app',
data() {
return {
search: '',
todo: {
topic: null,
},
todos: null || [],
}
},
watch: {
todos: function (val) {
this.$ls.set('todos', val)
}
},
mounted() {
this.todos = this.$ls.get('todos', this.todos);
var _this = this;
this.$ls.on('todos', function (val) {
_this.todos = val;
});
},
computed: {
filteredList() {
return this.todo.filter(todos => {
return todos.topic.toLowerCase().includes(this.search.toLowerCase())
})
}
}
});
</script>
I have a parent form component and a child. How do I pass data from one to another using v-model? They are in different files. I'm using the components of the Quasar Framework.
Parent Component
<template>
<q-input
label="Nome *"
lazy-rules
:rules="[val => (val && val.length > 0) || 'Por favor, digite o seu nome']"
v-model="nome"
/>
</template>
<script>
export default {
name: "Nome",
data() {
return {
nome: "Max"
};
}
};
</script>
Child Component
<template>
<div class="q-pa-md" style="max-width: 500px">
<q-form #reset="onReset" class="q-gutter-md">
<Nome> </Nome>
<div>
<q-btn label="Reset" type="reset" color="red" flat class="q-ml-sm" />
</div>
</q-form>
</div>
</template>
<script>
import Nome from "components/Nome.vue";
export default {
components: { Nome },
onReset() {
this.name = null;
}
};
</script>
How do I onReset() work?
Automatically translated.
I think you have some confusion about your child component and parent component. On your code Nome is the child component and the form that using Nome is the parent component.
You can use ref to call the reset method on Nome from the parent form component.
Here is a Working example -
Vue.component("nome-input", {
data(){
return {
input: ""
}
},
template: `
<input #input="onInput" type="text" v-model="input">
`,
methods: {
reset(){
this.input = ""
},
onInput(){
this.$emit('onInput', this.input);
}
}
});
Vue.component("user-form", {
data(){
return {
name: '',
}
},
components: {
},
template: `
<div>
{{name}}
<nome-input ref="nome" #onInput="updateName"></nome-input>
<button #click.prevent="save">Save</button>
<button #click.prevent="reset">reset</button>
</div>
`,
methods: {
save(){
console.log(this.name);
},
reset(){
this.name = "";
this.$refs.nome.reset();
},
updateName(value){
this.name = value;
}
}
});
new Vue({
el: "#app",
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<user-form></user-form>
</div>
</body>
</html>
Here is a jsfiddle link for the above codes https://jsfiddle.net/azs06/u4x9jw62/34/