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>

所以我传递了点击的对象并填充了一个＆＃34;活动的＆＃34; -data数组，以便在textarea中显示它。问题是，＆＃34;活动＆＃34; -array在视图中没有更新。

即使我找到了更新数据的解决方案，我认为这不是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>

Vue JS显示所选数组

1 个答案: