宜しくお願い致します。

下記のようなデータあり、inputフォームにidの値を入力した際、
配列グループ参照し、対応するグループのデータを即座に返す方法をvue.jsを使用して実現したいと考えております。


var app = new Vue({
        el: '#app',
        data: {
          products: [
            { id: 001, name: 'りんご', price: 1580, delv: 900 },
            { id: 002, name: 'オレンジ', price: 1580, delv: 800 },
            { id: 003, name: 'ぶどう', price: 1580, delv: 600 },
            { id: 004, name: 'なし', price: 980, delv: 500 },
          ]
        }
    //これ以降のコードの書き方が不明

htmlは下記のような感じで作る予定です。

<div id="app">
  　   <input type="text" v-model="products">

// inputの内容より即座にデータを返す
      <ul>
        <li>果物名：{{products.name}}</li>
        <li>値段：{{products.price}}円</li>
        <li>配送料：{{products.delv}}円</li>
      </ul>
</div>

わからないこと

vueのwatchを使いinputフォームの内容を監視しデータを返すことを考えておりますが、データを返す為のコードの記載がわかりません。（データの参照方法と返し方）

v-modelをproductsにしてますが、この処理の場合、違う名前にした方が良いのか。

回答に関して、簡単なサンプルコードを載せていただけますととてもありがたいです。
どうぞう宜しくお願い致します。

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

回答1件

ベストアンサー

こんな感じ

javascript
1<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2<div id="app">
3<input type="text" v-on:input="test">
4<ul>
5  <li>果物名：{{ product.name }}</li>
6  <li>値段：{{product.price}}円</li>
7  <li>配送料：{{product.delv}}円</li>
8</ul>
9</div>
10
11<script>
12var app = new Vue({
13  el: '#app',
14  methods: {
15    test:function(e){
16      var v=e.target.value;
17      this.product=this.products.filter(x=>x.id==v).pop()||{};
18    },
19  },
20  data: {
21    products: [
22      { id: 1, name: 'りんご',   price: 1580, delv: 900 },
23      { id: 2, name: 'オレンジ', price: 1580, delv: 800 },
24      { id: 3, name: 'ぶどう',   price: 1580, delv: 600 },
25      { id: 4, name: 'なし',     price:  980, delv: 500 },
26    ],
27  product:{},
28  },
29});
30</script>

methodつかわない

javascript
1<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2<div id="app">
3<input type="text" @input="e=>product=products.filter(x=>x.id==e.target.value).pop()||{}">
4<ul>
5  <li>果物名：{{ product.name }}</li>
6  <li>値段：{{product.price}}円</li>
7  <li>配送料：{{product.delv}}円</li>
8</ul>
9</div>
10<script>
11var app = new Vue({
12  el: '#app',
13  data: {
14    products: [
15      { id: 1, name: 'りんご',   price: 1580, delv: 900 },
16      { id: 2, name: 'オレンジ', price: 1580, delv: 800 },
17      { id: 3, name: 'ぶどう',   price: 1580, delv: 600 },
18      { id: 4, name: 'なし',     price:  980, delv: 500 },
19    ],
20  product:{},
21  },
22});
23</script>