vue.js - vue.js 显示数据彼此相邻而不是在

Question

我目前正在尝试从我的 API 中呈现一些数据。我使用 vue.js 和 wand 来显示来自多个机器人的数据。来自机器人的 id 应该在顶部，然后来自该机器人的数据应该在后面。我的问题是数据只是彼此下方而不是彼此相邻。有人知道我能做什么吗？请注意，id 为 two 的第二个机器人当前没有提要。太感谢了。

这就是现在的样子： https ://i.stack.imgur.com/FaN9U.png

这是代码：

<div id="robot_data" v-for="maschine in userdaten.maschinen" :key="maschine.maschineId">
       {{maschine.maschineId}}

       <div id="feeds" v-for="feed in maschine.feeds" :key="feed.feedsId">
            <div id="second" v-if="feed.datum >= '2020-10-03' + ' 00:00:00' && 
                 feed.datum <= '2020-10-03' + '23:59:59'"style="font-size: 16px">

                   {{feed.feedsId}} - {{feed.datum}}
            </div>
       </div>
</div>


  

标签： vue.js

Answer 1

请注意，使用时v-for，class应使用，而不是id（应该是唯一的）。您可以通过以下样式解决.robot_data问题float: left;：

new Vue({
  el:"#app",
  data: () => ({
    userdaten: {
      maschinen: [
        { maschineId:1, 
          feeds: [ 
            { feedsId:1, datum: '2020-10-03 23:50:00' }, 
            { feedsId:2, datum: '2020-10-03 00:00:00' } 
          ] 
        },
        { maschineId:2, 
          feeds: [
            { feedsId:1, datum: '2020-10-03 23:40:00' }, 
          ] 
        }
      ]
    }
  })
});

.robot_data { float: left; margin-right: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="robot_data" v-for="maschine in userdaten.maschinen" :key="maschine.maschineId">
    <strong>{{maschine.maschineId}}</strong>
    <div class="feeds" v-for="feed in maschine.feeds" :key="feed.feedsId">
      <div class="second" v-if="feed.datum >= '2020-10-03' + ' 00:00:00' && feed.datum <= '2020-10-03' + '23:59:59'" style="font-size: 16px">
        {{feed.feedsId}} - {{feed.datum}}
      </div>
    </div>
  </div>
</div>