Vue JS選択された配列の内容を表示

Question

私はVue JSを初めて使いました。私は非常に基本的なノートアプリケーションを構築することでそれを学びたいと思っています。

だから、左のすべてのメモ（自分の名前）のリストがあり、あなたがノートの名前をクリックすると、ノートテキストで満たされたテキストエリアには、上記の名前で表示されます。

私の問題は、ノートの配列でクリックされたノート配列を取得し、その名前とテキストを右側に表示することです。 私は（非常に不器用な）アプローチを試みた：

HTML：

<div class="col-md-3"> 
    <ul style="margin-top: 50px"> 
     <ol v-for="note in notes"> 
      <h3 @click="setActive(note)">{{note.name}}</h3> 
     </ol> 
    </ul> 
</div> 
<div class="col-md-9" v-show="active"> 
    <h1>{{active.name}}</h1> 
    <textarea class="form-control" rows="10">{{active.text}}</textarea> 
</div> 

JS：

<script> 
    var vm = new Vue({ 
     el: 'body', 
     data: { 
      active: {}, 
      notes: [{ 
       id: 1, 
       name: 'Note 1', 
       text: 'Text of note 1' 
      }, { 
       id: 2, 
       name: 'Note 2', 
       text: 'Text of note 2' 
      }, { 
       id: 3, 
       name: 'Note 3', 
       text: 'Text of note 3' 
      }, { 
       id: 4, 
       name: 'Note 4', 
       text: 'Text of note 4' 
      }, { 
       id: 5, 
       name: 'Note 5', 
       text: 'Text of note 5' 
      }] 
     }, 
     methods: { 
      setActive: function(note) { 
       this.active.id = note.id 
       this.active.name = note.name 
       this.active.text = note.text 
       console.log(this.active.id) 
      } 
     } 
    }); 

</script> 

だから私はクリックしたオブジェクトを渡すと、 "アクティブ" を記入します-data配列をテキストエリアに表示します。問題は、「アクティブな」配列がビュー内で更新されていないことです。

私は、データを更新するための解決策を見つけるだろうしても、私はこれがVueのJSに正しいアプローチではないと思いますし、短い/シンプルな1があるかもしれません。..

だから私の質問は別があり、ありますこれを少し簡単にするアプローチ？

Answer 1

アクティブなノートIDを追跡し、計算されたプロパティを使用してデータを返すだけです。あなたは、同じデータを表すために意味の二つの変数を持っていない、とあなたはリアルタイムでノートを更新するためにv-modelを使用することができますこの方法：

JS

var vm = new Vue({ 
    el: 'body', 
    data: { 
     active: 0, 
     notes: [{ 
      id: 1, 
      name: 'Note 1', 
      text: 'Text of note 1' 
     }, { 
      id: 2, 
      name: 'Note 2', 
      text: 'Text of note 2' 
     }] 
    }, 
    methods: { 
     setActive: function(index) { 
      this.active = index; 
     } 
    }, 
    computed: { 
     activeNote: function(){ 
     return this.notes[this.active]; 
     } 
    } 
}); 

HTML：

<div class="col-md-3"> 
    <ul style="margin-top: 50px"> 
     <ol v-for="note in notes"> 
      <h3 @click="setActive($index)">{{note.name}}</h3> 
     </ol> 
    </ul> 
</div> 
<div class="col-md-9"> 
    <h1>{{activeNote.name}}</h1> 
    <textarea class="form-control" rows="10" v-model="activeNote.text"></textarea> 
</div>