Question

我编写了这段代码，它从后端api中提取json并在vue中填充select组件。我想在选择组件

旁边添加一个重新加载按钮

 <!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>

但我创建的图像按钮将转到下一行而不是显示在div旁边。

Answer 1

在你的css中试试这个：

.round-button {
  display: inline-block;
}

新版本：

.round-button {
  display: inline-flex;
  vertical-align: middle;
}

对齐选择组件旁边的圆形按钮

1 个答案: