javascriptvue.jsvuejs2vuetify.jsjsfiddle

Of these two similar JSFiddles (using Vue.js (2.6.11) and Vuetify (2.4.0)), why does the v-card display properly in one of them, but not the other?


Hello to everyone who's reading this. :)

My question is: Of these two similar JSFiddles (using Vue.js (2.6.11) and Vuetify (2.4.0)), why does the v-card display properly in one of them, but not the other?

JSFiddle #1: https://jsfiddle.net/omLungap/5/

<div id="app">
  <v-card>
      <v-card-text>
        <span v-for="i in 10" :key="i">
          {{ message }}
          <br>
        </span>
      </v-card-text>
  </v-card>
</div>

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  data: {
    message: "Hello, world!"
  }
});

JSFiddle #2: https://jsfiddle.net/j5e0f86o/3/

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.4.0"></script>

<div id="app">
  <v-card>
      <v-card-text>
        <span v-for="i in 10" :key="i">
          {{ message }}
          <br>
        </span>
      </v-card-text>
  </v-card>
</div>

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  data: {
    message: "Hello, world!"
  }
});

Any input would be greatly appreciated!


Solution

  • The second fiddle does not load stylesheets. If you add

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

    they look pretty much the same (they use different Vuetify versions, so they look slightly different)