Skip to content

Instantly share code, notes, and snippets.

@seyed-dev

seyed-dev/vuejs-example.html

Created December 5, 2020 13:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save seyed-dev/5258283ae5282e336c47be5e4e7a331f to your computer and use it in GitHub Desktop.
Save seyed-dev/5258283ae5282e336c47be5e4e7a331f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vuejs-example.html
<html>
<head>
<title>Vuejs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body style="background-color: darkslategrey;">
<div class="container" id="app">
<div class="csrf" id="{{csrf_token}}"></div>
<div class="row mt-5">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<div class="row mb-2">
<div class="col-6">
<label for="">First Name</label>
<input type="text" class="form-control" v-model="first_name">
</div>
<div class="col-6">
<label for="">Last Name</label>
<input type="text" class="form-control" v-model="last_name" v-on:keyup.enter="addName(first_name, last_name)">
</div>
</div>
<div class="row mb-2">
<div class="col-6" v-for="name in names">
{{name}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
first_name: "",
last_name: "",
names: []
},
methods: {
full_name(){
mthis = this
data_to_send = {}
$.ajax({
url: '/portal/fullname',
data : JSON.stringify(data_to_send),
method : 'POST',
headers: {
'X-CSRF-Token': $('.csrf').attr('id')
},
success: function (data) {},
error: function (data) {}
});
},
addName(first_name,last_name){
this.first_name=""
this.last_name=""
this.names.push(`${first_name} ${last_name}`)
}
},
created(){
console.log('Hello world')
},
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment