小编Flo*_*fia的帖子

我正在使用 Vuetify 的日历组件，它正确地显示了数据，但是我在控制台中收到了该警告，这有点烦人，我不知道出了什么问题，因为大部分代码是文档中的副本，所以可能这是一个新的错误还是什么？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
        today: '2020-01-01',
        events: [{
          name: 'test',
          start: '2020-01-01 10:00'
        },
        {
          name: 'test_2',
          start: '2020-02-12 10:00'
        }],
    }
  },



})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
        <v-sheet height="400">
            <v-calendar ref="calendar" :now="today" :value="today" :events="events" color="amber" event-color="amber" type="month"></v-calendar>
        </v-sheet>
    </v-content>
  </v-app>
</div>

我有一个名为视图new.html.erb在客户端localhost:3000/clients/new。我验证它的错误。如果有错误，我将再次渲染新视图以显示所有错误。问题是它localhost:3000/clients在我的浏览器中显示为而不是localhost:3000/clients/new。这是为什么？难道“渲染”应该不更改URL中的任何内容吗？当我刷新页面时，这会产生问题，因为我没有“索引”视图，并且触发了错误，而不是按预期显示“新”视图。

new.html.erb

<% if @client.errors.any? %>
    <div class="alert alert-danger">
        <h4 class="alert-heading">Error</h4>
            <% @client.errors.full_messages.each do |msg| %>
                <p><%= msg %></p>
            <% end %>
     </div>
<% end %>

<%= form_for @client, url: clients_path, remote: false do |f| %>
    <div class="form-group  row"><label class="col-sm-2 col-form-label">*Name</label>
        <div class="col-sm-3">
            <%= f.text_field :name, class:"form-control" %>
                <% if @client.errors[:name].any? %>
                    <script>$('#client_name').css('border-color', 'red');</script>
                <% end %>
         </div>
</div>

<div class="col-sm-4 col-sm-offset-2">
    <%= f.submit "Submit", id:"submit", class: 'btn btn-primary btn-sm'%>
    <%= link_to …

我有以下水平条形图

<template>
<div>
   <canvas id="myChart" width="100" height="100"></canvas>
</div>
</template>

<script>
import Chart from 'chart.js';
export default {
    data() {
        return {
            ctx: null,
            chart: null,
        }
    },

    mounted() {
        this.ctx = document.getElementById('myChart');
        this.chart = new Chart(this.ctx, {
            type: 'horizontalBar',
            data: {
                labels: ['1', '2', '3', '4', '5'],
                datasets: [{
                    categoryPercentage: 0.4,
                    label: 'Stars',
                    data: [15, 28, 34, 48, 100],
                    backgroundColor: [
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, 0.2)',
                        'rgba(178, 140, 129, …

我在我的列中使用 Bootstrap Vue 库，每行显示 3 张卡片，它在桌面上看起来很好，但在移动设备上看起来太小，所以我想在移动设备上将这 3 张卡片一张一张地显示在另一张卡片的下面。我怎样才能做到这一点？

new Vue({
  el: "#app"
});

.card{
    background-color: #BAE5FF !important;
    border: none !important;
    border-radius: 0px 0px !important;
}

.work-link{
    color: #172e54;
}

<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-row>
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 class="mb-0"><strong>1</strong></h5></a>
         </template>

      </b-card>
    </b-col>
    
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 …