Vue with axios sample

Developer
Tommy
Size
2,991 Kb
Views
10,120
  1. Vue with axios sample Previews
  2. Vue with axios sample HTML Codes
  3. Vue with axios sample CSS Codes
  4. Vue with axios sample JS Codes

How do I make an vue with axios sample?

What is a vue with axios sample? How do you make a vue with axios sample? This script and codes were developed by Tommy on 30 December 2022, Friday.

Vue with axios sample Previews
IQ Test

Vue with axios sample - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue with axios sample</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="lead-form"> <h1 class="text-center" style="display: none">Fill Out This Form</h1> <hr /> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Starting Zip" v-model="startingZip"> <span class="city-span">{{ startingCity }}</span> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Ending Zip" v-model="endingZip"> <span class="city-span">{{endingZip}}</span> </div> </div> <div class="row"> <div class="col-md-12"> <button class="btn btn-primary btn-block" id="submit-form">Submit</button> </div> </div> </div> <!-- end of .lead-form --> </div> <!-- end of .col-md-6.col-md-offset-3 --> </div> <!-- end of .row --> </div> <!-- end of .container -->
</div>
<!-- end of #app --> <script src="js/index.js"></script>
</body>
</html>

Vue with axios sample - Script Codes CSS Codes

#app { height: 100vh; width: 100vw; background-color: red; background: url("https://source.unsplash.com/category/nature/1920x1080") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.lead-form { background-color: rgba(255, 255, 255, 0.6); border-radius: 5px; padding: 10px 50px 30px 50px; margin-top: 100px;
}
span.city-span { color: #444; text-transform: uppercase; margin-left: 5px; margin-top: 10px;
}
.form-control { margin-bottom: 3px;
}

Vue with axios sample - Script Codes JS Codes

 var app = new Vue({ el: '#app', data: { startingZip: '9021', startingCity: '', endingZip: '', endingCity: '' }, watch: { startingZip: function() { this.startingCity = ''; if (this.startingZip.length == 5) { // call API method this.lookupStartingZip(); } } }, methods: { lookupStartingZip: _.debounce(function() { this.startingCity = 'Searching...'; debugger axios.get('http://ziptasticapi.com/' + this.startingZip) .then(function(response){ debugger // this.startingCity = response.data.city; this.startingCity = "aa" }) .catch(function(error){ debugger this.startingCity = "invalid zipcode" }); }, 500) } })
Vue with axios sample - Script Codes
Vue with axios sample - Script Codes
Home Page Home
Developer Tommy
Username hoehoe
Uploaded December 30, 2022
Rating 3
Size 2,991 Kb
Views 10,120
Do you need developer help for Vue with axios sample?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tommy (hoehoe) Script Codes
Name
Customise Scroll Bar with css
Materialize css
Check box in Bootstrap Drop down list
AngularJS
A Pen by Tommy
Web SQL
Custom checbox with css
Get Form value with jQuery
CSS animation
Parallax with only css
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!