NuxtでVuexを使う3

今回はinput要素の文字列を取得して、storeに格納するところを行います。
格納する処理自体は前回までで実装済なので、inputの値をどのようにして渡すかという点がポイントになります。

input要素にv-modelをつけることで、vueのdataで紐付きが行われるのでdataを用意してv-modelで紐付けます。

test.vueのscriptを修正します。

export default {
  layout: 'mylayout',
  data(){
	  return {
		  name:'',
		  price:''
	  }
  },
  methods:{
	  add:function(){
		  this.$store.dispatch(`list/addList`,{_name:this.name,_price:this.price})
	  }
  }
}

dataのnameとprice使用すればOKで、あとはinput要素と紐付けます

<v-layout justify-space-around>
  <v-flex xs6 md5>
    <v-text-field label="商品名" v-model="name" required></v-text-field>
  </v-flex>
  <v-flex xs6 md5>
    <v-text-field label="値段" v-model="price" required></v-text-field>
  </v-flex>
</v-layout>

v-modelでdataと紐づけておきます。これだけで簡単にinput要素の値を取得できます。

入力したあとは入力値を空にしたいので少し変更します。

  methods: {
    add: function () {
      this.$store.dispatch(`list/addList`, {
        _name: this.name,
        _price: this.price
      })
      this.name = ''
      this.price = ''
    }
  }

これで登録した後はinputのvalueが空になります。

コメント

タイトルとURLをコピーしました