【Vue.js】valueの値を2つ付けて別々に取り出したい

現状

htmlファイルに、Vue.jsで選択した項目の合計金額を出しています。

やりたいこととして、ラジオボタンとチェックボックスにvalueの値を2つ渡して、1つの値は金額の合計算出のために、もう1つは選択した時の項目が何かが分かるようにしたいです。

問題点

valueの値が数字だけなので、何を選択したかが分からない。

実現したいこと

valueにもう一つ値を追加して、金額の合計を出しつつ、選択した内容が分かるようにしたい。
valueから二つの値を分けて使いたい。

現状のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7</head>
8<body>
9  <div id="app">
10    <form method="post" action="mail.php">
11      <div class="item">
12        <h2>どれを選びますか？</h2>
13        <input type="radio" name="どれを選びますか？" id="1a" value="10000" v-model.number="sum1">
14        <label for="1a">金</label>
15
16        <input type="radio" name="どれを選びますか？" id="1b" value="20000" v-model.number="sum1">
17        <label for="1b">銀</label>
18
19        <input type="radio" name="どれを選びますか？" id="1c" value="30000" v-model.number="sum1">
20        <label for="1c">銅</label>
21      </div>
22
23      <div class="item">
24        <h2>その他のオプションを選んで下さい</h2>
25        <input type="checkbox" name="その他のオプションを選んで下さい[]" id="2a" value="10000" v-model.number="sum2">
26        <label for="2a">切断</label>
27
28        <input type="checkbox" name="その他のオプションを選んで下さい[]" id="2b" value="20000" v-model.number="sum2">
29        <label for="2b">磨き</label>
30
31        <input type="checkbox" name="その他のオプションを選んで下さい[]" id="2c" value="30000" v-model.number="sum2">
32        <label for="2c">加工</label>
33
34        <input type="checkbox" name="その他のオプションを選んで下さい[]" id="2d" value="40000" v-model.number="sum2">
35        <label for="2d">その他</label>
36      </div>
37
38      <div class="item">
39        <input type="text" name="合計金額[][円]" v-model="sumTotal" readonly>
40      </div>
41    </form>
42  </div>
43
44  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
45  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
46  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.2/dist/vue-router.js"></script>
47  <script>
48    let app = new Vue({
49      el: '#app',
50      data: {
51        sum1: '',
52        sum2: []
53      },
54      filters: {
55        numFormat: function (value) {
56          if (!value) {
57            return '0'
58          }
59          return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
60        }
61      },
62      computed: {
63        checkboxTotal: function () {
64          return this.sum2.reduce((p, x) => p + x, 0)
65        },
66        sumTotal: function () {
67          return this.sum1 + this.checkboxTotal
68        },
69      }
70    });
71  </script>
72</body>
73</html>

行動規範の内容に同意します

回答1件

input系要素のvalueはサブミットするときの値なので
内部で使うなら好きにしてください

投稿2020/09/18 00:14

yambejp

総合スコア116724

yambejp

2020/09/18 00:16

ざっと考えてもいくつか方法はあげられます・valueに配列やオブジェクトのようなjsonを書く・カスタムデータでデータをもたせる・jsで配列やオブジェクトでデータを持ち、拾ったvalueから参照する

suzuki_code

2020/09/18 03:36

具体的なコードはありますでしょうか？

yambejp

2020/09/18 03:43

「選択した内容が分かるようにしたい」をどう表現したいかによります

suzuki_code

2020/09/18 04:10

例えば、上記のどれを選びますか？の例だと、ラジオボタンのvalueに10000という値段と金という選択項目の名前を持たせます。 valueの値の10000という値段は、合計金額を算出するのに使用します。もう一つのvalueの値は金という選択項目の名前を、持たせているので、お問い合わせ自動返信メールの内容に、【どれを選びますか？】金というように、ここでは項目の名前が欲しいのです。

行動規範の内容に同意します