複数のフォームの値を取得し、配列に格納したいです。

前提・実現したいこと

Vue.jsで登録画面を作成しております。
複数の入力フォームの値を取得し、それを配列に格納したいです。

発生している問題・エラーメッセージ

複数の入力フォームの値を取得し、それを配列に格納するやり方がわからず、教えていただきたいです。
無知で申し訳ありません。

該当のソースコード

HTML
1
2                    <div class="form-group row">
3                        <label class="control-label col-sm-4">顧客<span class ="input-require">*</span></label>                        
4                        <div class="col-sm-8">
5                            <input type="text" v-model="customer" class="form-control col-form-label-sm" id="create1"
6                            @blur="$v.customer.$touch()" :class="{ error : $v.customer.$error,'form-control': true }"/>                            
7
8
9                            <div v-if="$v.customer.$error"> 
10                                <span class="invalid-feedback d-block" v-if="!$v.customer.required">顧客は必須入力です。</span>
11                                <span class="invalid-feedback d-block" v-if="!$v.customer.maxLength">{{$v.customer.$params.maxLength.max}} 文字以内で入力してください。</span>  
12                            </div> 
13                        </div>
14                    </div>
15
16                    <div class="form-group row">
17                        <label class="control-label col-sm-4">顧客カナ</label>                        
18                        <div class="col-sm-8">
19                            <input type="text" v-model="customerKana" class="form-control col-form-label-sm"
20                            @blur="$v.customerKana.$touch()" :class="{ error : $v.customerKana.$error,'form-control': true }"/>
21                            <span class ="help-block">※全角カナ・スペースのみで入力してください</span>
22
23                            <div v-if="$v.customerKana.$error">
24                                <span class="invalid-feedback d-block" v-if="!$v.customerKana.fullKana">全角カナ・スペースのみ有効です。</span>
25                                <span class="invalid-feedback d-block" v-if="!$v.customerKana.maxLength">{{$v.customerKana.$params.maxLength.max}} 文字以内で入力してください。</span>
26                            </div>  
27                                                    
28                        </div>
29                    </div>
30
31               <div class="col text-center">
32                   <button :disabled="$v.$invalid" @click="submit" class="btn btn-primary">送信</button>                  
33               </div>
34
35                    <div class="form-group row">
36                        <label class="control-label col-sm-4">電話番号</label>                        
37                        <div class="col-sm-8">
38                            <input type="text" v-model="phone" class="form-control col-form-label-sm"
39                            @blur="$v.phone.$touch()" :class="{ error : $v.phone.$error,'form-control': true }"/>
40
41                            <div v-if="$v.phone.$error">
42                                <span class="invalid-feedback d-block" v-if="!$v.phone.phoneNumber">電話番号の形式で入力してください。</span>
43                            </div>
44
45                        </div> 
46                    </div>
47
48                    <div class="form-group row">
49                        <label class="control-label col-sm-4">FAX番号</label>                        
50                        <div class="col-sm-8">
51                            <input type="text" v-model="fax" class="form-control col-form-label-sm"
52                            @blur="$v.fax.$touch()" :class="{ error : $v.fax.$error,'form-control': true }"/>
53
54                            <div v-if="$v.fax.$error">
55                                <span class="invalid-feedback d-block" v-if="!$v.fax.phoneNumber">FAX番号の形式で入力してください。</span>
56                            </div>
57
58                        </div>                        
59                    </div>
60
61                    <div class="form-group row">
62                        <label class="control-label col-sm-4">Webサイト<span class ="input-require">*</span></label>                        
63                        <div class="col-sm-8">
64                            <input type="text" v-model="site" class="form-control col-form-label-sm" id="create2"
65                            @blur="$v.site.$touch()" :class="{ error : $v.site.$error,'form-control': true }"/>
66
67                            <div v-if="$v.site.$error">
68                                <span class="invalid-feedback d-block" v-if="!$v.site.required">Webサイトは必須入力です。</span>
69                            </div>

JS
1  methods: {
2      
3      submit() {
4
5
6          // この配列にフォームの値を格納
7          var customers =  []
8　　　　　
9　　　　　　// このあとがわからないです
10　｝

退会済みユーザー

2020/08/07 16:12

質問はvueの使い方がまるで分からない人がSPAを理解せずにHTMLベースで聞いている内容に見えます。 vueはtemplateベースのコンポーネントであり、入力項目はすでに各コンポーネントのプロパティと連動する仕組みにしてるのではないのですか？多分もう少しvue寄りの言葉を使って質問しないと、回答者は説明してしまっていいのか躊躇すると思います。無知を謝る前に知ろうとしてください。知ろうとして理解できないところを、自分の言葉でピンポイントで聞きましょう。