I have created a code that retrieves json from a backend api and fills a select component in vue. I'm looking to include a reload button beside the select component,
<!DOCTYPE html>
<html lang="en">
<title>Test page app</title>
<meta charset="utf-8">
<style>
.round-button {
width:3%; // controls the size of button
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
line-height:50px;
border:1px solid #cfdcec;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 5px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button img {
display: block;
width: 90%; // control image size
padding: 24%; // control image alignment
padding-right: 50%;
height: auto;
}
</style>
<script src="static/vendor/vue.js"></script>
<script src="static/vendor/axios.min.js"></script>
</head>
<body>
<div id="select">
<form>
<select v-model="selected" v-on:change.once="executeLoader('tests', $event)"># v-bind:disabled="isRunning">
<option disabled selected>Please Select One</option>
<option></option>
<option v-for="n in projects" :value="n">
{{n.id}} : {{ n.name }}
</option>
</select>
<div class="round-button">
<div class="round-button-circle">
<a href="#" class="round-button">
<img src="images/leftarrow.png" alt="Reload" title="Reload" />
</a></div>
</div>
<h3>Selected: {{ selected.name }} </h3>
</form>
</div>
<script>
new Vue({
el: "#select",
data: {
projects: [],
selected: "Please Select One",
isRunning: false
},
methods : {
executeLoader: function(t, event){
alert('Query "'+ this.selected.name +
'" Dropdown: "' + t + '"');
if (!this.selected){
console.log("did not submitted");
} else {
this.isRunning = true;
}
}
},
mounted() {
axios.get("projects.json")
//axios.get("http://127.0.0.1:5050/api/images?filter=placeholder")
.then(response => {
this.projects = response.data.projects
})
}
});
</script>
</body>
</html>
However, the image button I've inserted is being displayed on the next line instead of appearing alongside the div.