Vuetifyのv-selectで選択された値を取得して表示できないです。

Question

<template>
  <v-container fluid>
    <v-layout row wrap align-center>
      <v-flex xs12 sm6>
        <v-subheader v-text="'Size'"></v-subheader>
      </v-flex>
      <v-flex xs12 sm6>
        <v-select
          :v-model="product.size"
          :items="sizes"
          :menu-props="{ maxHeight: '400' }"
          label="Select"
          persistent-hint
        ></v-select>
      </v-flex>

      <v-flex xs12 sm6>
        <v-subheader v-text="'color'"></v-subheader>
      </v-flex>

      <v-flex xs12 sm6>
        <v-select
          :v-model="product.color"
          :items="colors"
          label="Select"
          chips
          persistent-hint
        ></v-select>
      </v-flex>


      <v-btn block color="secondary"　@click="submit">
      ADD TO CART
      </v-btn>

<div>{{product.size}}</div>
<div>{{product.size}}</div>
<div>{{product.size}}</div>


    </v-layout>
  </v-container>

</template>

<script>
import { mapActions } from 'vuex'
import Cart from '../components/Cart.vue'
export default {
  data () {
    return {
      sizes: ['S', 'M', 'L'],
      colors:['白', 'グレー', '黒'],
      product:{},
    }
},
  methods: {
    submit () {
      this.addtoCart(this.product)
      this.$router.push({ name: 'shop_item_cart' })
      this.product = {}
    },
    ...mapActions(['addtoCart'])
  }
}
</script>

<div>{{product.size}}</div>という部分で出力されるか試してみたのですが、 画面には何も表示されません。なぜでしょうか。 Vuetifyのv-selectで選択された値を取得して表示するためにはどのようにすればよいのでしょうか。 productオブジェクトを作り、そこに選択された値を格納するイメージで上記のコードは書きました。

Answer 1

解決できてよかったです。
あとは、importするファイルが増えると相対パスでは読みづらくなってくるので、絶対パスにするとよいと思います。

Cart.vueが src/components/Cart.vue にあるとしてこのように書けます（@がsrcに相当）

import Cart from '@/components/Cart.vue'

• webpackで構築されている場合は設定が必要です。

例 https://kitak.hatenablog.jp/entry/2017/09/04/192010

• vue-cliの場合は何もしなくても動くはずです（自分の環境では読み込めているので）

Comments

[yonchome]

アドバイスありがとうございます！

Answer 2

こんにちは。
v-modelの前にコロンは不要ですね（VuetifyというよりVueの構文の問題です）

公式の省略記法 にありますが、

// これは同じです
<input v-bind:value="hoge">
<input :value="hoge">

v-bind:value を省略すると :value と書くことが出来ます。

ちなみに、v-modelはv-bindとv-onをまとめて書くことができる構文です。

Comments

[yonchome]

ありがとうございます。
解決できました。
他に書き方としておかしな箇所があれば教えていただけますでしょうか？

[8zca]

あ、、間違って新たにコメント投稿してしまった・・。