Vue.jsを活用してセレクトボックスの項目を選んだら、用意したら配列の金額を表示させるには？

Vue.jsを使って配列の内容を選ぶ次の表示のようなWebページのコードを作っています。

ところが、うまく選び出してくれません。
Chromeディベロッパーツールのエラーメッセージの抜粋は

vue.js:634 [Vue warn]: Error in mounted hook: "ReferenceError: data is not defined"

(found in <Root>)
warn @ vue.js:634
logError @ vue.js:1902
globalHandleError @ vue.js:1897
handleError @ vue.js:1857
invokeWithErrorHandling @ vue.js:1880
callHook @ vue.js:4236
mountComponent @ vue.js:4102
Vue.$mount @ vue.js:9088
Vue.$mount @ vue.js:11993
Vue._init @ vue.js:5026
Vue @ vue.js:5092
(anonymous) @ Vue_select03.html:27
vue.js:1906 ReferenceError: data is not defined
    at Vue.getPrice (Vue_select03.html:41)
    at Vue.mounted (Vue_select03.html:45)
    at invokeWithErrorHandling (vue.js:1872)
    at callHook (vue.js:4236)
    at mountComponent (vue.js:4102)
    at Vue.$mount (vue.js:9088)
    at Vue.$mount (vue.js:11993)
    at Vue._init (vue.js:5026)
    at new Vue (vue.js:5092)
    at Vue_select03.html:27

です。
まだ、Vueの変数やメソッドの指定がよく分かってないからなのですが、どう直せばよいのか、どうかお助け下さい。コードは以下の通りです。

html
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<meta http-equiv="Content-Style-Type" content="text/css" />
7<meta http-equiv="Content-Script-Type" content="text/javascript" />
8<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9<title>Vue.js selectの取得</title>
10</head>
11<body>
12
13<div id="area">
14  <select name="fluits" id="fluit-select" v-model="selected">
15    <option disabled value="0">ここからお選びください。</option>
16    <option value="1">りんご</option>
17    <option value="2">みかん</option>
18    <option value="3">バナナ</option>
19  </select>
20  <span>Selected: {{ selected }}</span>
21  <br>
22  <br>
23  <span >price: {{price}}</span>
24</div>	
25
26<script>
27var vm = new Vue({
28  el: '#area',
29  data: {
30    selected: '',
31    fluits:[
32      { id: 0, name: 'null',price: 0},
33      { id: 1, name: 'りんご',price: 100},
34      { id: 2,  name: 'みかん',price: 100},
35      { id: 3,  name: 'バナナ',price: 100}
36    ],
37    price: 0
38  },
39  methods: {
40    getPrice() {
41      this.price = this.fluits[this.selected.value].price
42    }
43  },
44  mounted: function () {
45    this.$nextTick(function () {
46      getPrice()
47    })
48  }
49});
50</script>
51
52</body>
53</html>
54

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

回答2件

自己解決

ku__ra__geさんの御指導の御蔭でで動作しました。３日がかりの懸案が片付いたので喜ばしい限りです。
セレクトボックスのv-on:change属性にmethodsで定義した関数を与えるのが肝心なのですね。computedとmethodsの使い分けも分かりました。
これで次のオブジェクト操作に取り掛かれます。
ku__ra__geさんには重ねてお礼申し上げます。

html
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<meta http-equiv="Content-Style-Type" content="text/css" />
7<meta http-equiv="Content-Script-Type" content="text/javascript" />
8<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9<title>Vue.js selectの取得</title>
10</head>
11<body>
12
13<div id="area">
14  <select name="fluits" id="fluit-select" v-model="selected" v-on:change="getIndex()">
15    <option disabled value="0">ここからお選びください。</option>
16    <option value="1">りんご</option>
17    <option value="2">みかん</option>
18    <option value="3">バナナ</option>
19  </select>
20  <span>Selected: {{ selected }}</span>
21  <br>
22  <br>
23  <span >price: {{gatPrice}}</span>
24</div>	
25<script>
26var vm = new Vue({
27  el: '#area',
28  data: {
29    selected: '',
30    fluits:[
31      { id: 0, name: 'null',price: 0},
32      { id: 1, name: 'りんご',price: 100},
33      { id: 2,  name: 'みかん',price: 200},
34      { id: 3,  name: 'バナナ',price: 300}
35    ],
36    price: 0,
37    i: 1
38  },
39  computed: {
40    gatPrice: function() {
41       return this.fluits[this.i].price
42    }
43  },
44  methods: {
45    getIndex: function() {
46       this.i = this.selected
47    },
48  }
49
50});
51</script>
52</body>
53</html>
54

投稿2021/09/07 09:21

seastar3

総合スコア2287

こんな感じ？
Vueの変数やメソッドの指定がよく分かってないなら、公式ドキュメントを読んでくださいとしか答えられませんが。

html
1<div id="area">
2  <select name="fluits" id="fluit-select" v-model="selected">
3    <option disabled value="0">ここからお選びください。</option>
4    <option v-for="fluit in fluits" :value="fluit">{{ fluit.name }}</option>
5  </select>
6  <span>Selected: {{ selected.id }}</span>
7  <br>
8  <br>
9  <span>price: {{ selected.price }}</span>
10</div>
11
12<script>
13var vm = new Vue({
14  el: '#area',
15  data: {
16    selected: 0,
17    fluits:[
18      { id: 1, name: 'りんご', price: 100},
19      { id: 2, name: 'みかん', price: 200},
20      { id: 3, name: 'バナナ', price: 300}
21    ],
22  },
23});
24</script>

投稿2021/09/07 05:13

ku__ra__ge

総合スコア4524

seastar3

2021/09/07 05:49

ku__ra__ge さん、素早いご回答ありがとうございます。しっかり動作しました。セレクトボックスの作成もスマートにしていただき、目的の動作が達成できて目からうろこです。実は、セレクトボックスの結果をもとにJSONオブジェクトにフィルタをかける構想でして、mountedなりwatchなりで関数が動作するように組むひな形を練習しております。mountedフックでプログラムが動くのはどのような構文がふさわしいのか知りたくて質問しました。ここでは、mountedで代入式を働かすやり方を教えていただければ幸いです。

ku__ra__ge

2021/09/07 06:34

「mountedで代入式を働かすやり方」というのが何をやろうとしているのか分かりません。 mountedはVueオブジェクトがマウントされた後に1度だけ呼ばれるもので、ドロップダウン選択が変更されたときに選択内容を反映させるためには使えないと思います。入力内容をもとに、配列から条件に該当するアイテムのみを表示したいという要望であれば、computedが適切かと思います。 <div id="area"> <input type="text" v-model="filterText"> <div v-for="item in filterdList">{{ item }}</div> </div> <script> var vm = new Vue({ el: '#area', data: { filterText: "", list: ["hoge", "fuga", "piyo"], }, computed: { filterdList: function() { return this.list.filter(s=>s.includes(this.filterText)) }, } });

seastar3

2021/09/07 08:30

ku__ra__geさん動作確認しました。確かに動きましたありがとうございます。 computed内の属性filterdListの呼び出しには()がいらないとか、アロー関数の後のthis.指定とか、勉強したことの確認ができて、とてもためになります。この形式をヒントに動作するように試してみます。

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

あなたの回答