Vue JS display content of selected array

Question

I'm new to Vue JS and I want to learn it by building a very basic note-app.

So there is a list of all notes (their names) on the left and if you click on a name of a note, a textarea filled with the note text is displayed with the name above:

My problem is to get the clicked note array in the array of notes and display its name and text on the right. I've tried a (very clumsy) approach:

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>

So I pass the clicked object and fill an "active"-data array in order to display it in the textarea. The problem is, the "active"-array is not updaded in the view.

Even If I would find a solution to update the data, I think this is not the right approach in Vue JS and there might be a short/simpler one..

So my question is, is there another approach to achieve this a bit easier?

Answer 1

Just keep track of the active note ID and use a computed property to return the data. This way you don't have two variables that mean to represent the same data, and you can use v-model to update the note in real-time:

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>