Vue JS Anzeigeinhalt von ausgewählten Array

Question

Ich bin neu in Vue JS und ich möchte es lernen, indem sie eine sehr einfache Notiz-App zu bauen.

So gibt es eine Liste aller Notizen (ihre Namen) auf der linken Seite, und wenn Sie auf einen Namen einer Note klicken, wird ein Textfeld mit dem Hinweistext gefüllt ist mit dem Namen oben angezeigt:

Mein Problem besteht darin, das angeklickte Noten-Array in das Noten-Array zu bekommen und dessen Namen und Text auf der rechten Seite anzuzeigen. Ich habe eine (sehr ungeschickt) Ansatz versucht:

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> 

Also gehe ich das geklickt Objekt und füllen einen "aktiven" -Data-Array, um es im Textfeld anzuzeigen. Das Problem ist, dass das "active" -Array in der Ansicht nicht aktualisiert wird.

Auch wenn ich eine Lösung finden würden die Daten zu aktualisieren, ich denke, das in Vue JS nicht der richtige Ansatz ist, und es könnte ein kurzes/einfacheres ..

Also meine Frage ist, gibt es eine andere sein Ansatz, um dies ein bisschen einfacher zu erreichen?

Answer 1

Halten Sie einfach den Überblick über die aktive Note ID und die Verwendung einer berechneten Eigenschaft die Daten zurückzukehren. Auf diese Weise haben Sie nicht zwei Variablen, die die gleichen Daten darstellen bedeuten, und Sie können v-model verwenden, um die Notiz in Echtzeit zu aktualisieren:

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>