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>

所以我传递了单击的对象并填充了一个“活动”数据数组，以便在文本区域中显示它。问题是，视图中没有更新“活动”数组。

即使我能找到更新数据的解决方案，我认为这不是 Vue JS 中的正确方法，可能会有一个更短/更简单的方法..

所以我的问题是，是否有另一种方法可以更轻松地实现这一目标？

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>