<div id="app">
  <v-app>
    <v-form class="pa-4" ref="form">
      <p>フルーツ注文フォーム</p>
      <div v-for="fruit in fruits" :key="fruit.id">
        <v-checkbox
          v-model="selectedValues"
          :value="fruit.id"
          :label="fruit.name"
          :rules="validateCheckbox"
         />
      </div>
      <v-btn
        color="success"
        class="mt-4"
        @click="submit"
      >
        送信
      </v-btn>
    </v-form>
  </v-app>
</div>
new Vue({
  el: '#app',
  
  vuetify: new Vuetify(),
  
  data: () => ({
    fruits: [
      {id: 1, name: "みかん"},
      {id: 2, name: "りんご"},
      {id: 3, name: "いちご"},
      {id: 4, name: "ばなな"}
    ],
    
    selectedValues: []
  }),
  
  computed: {
    validateCheckbox () {
      return [this.selectedValues.length > 0 || "フルーツを選択してください"]
    }
  },
  
  methods: {
    submit () {
      this.$refs.form.validate()
    }
  }
})
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900
  2. https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css
  3. https://fonts.googleapis.com/css?family=Material+Icons
  4. https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js
  2. https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js
  3. https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.js