我的问题是用用户的输入替换计算属性的值。我的设置是这样的:
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" v-show="activeNote">
<h2 v-show="nameIsText" @click="switchNameTag()">{{activeNote.name}}</h2>
<input class="form-control" v-show="!nameIsText" @keyup.enter="switchNameTag()" value="{{activeNote.name}}">
<textarea name="note-text" class="form-control" rows=10>{{activeNote.text}}</textarea>
</div>
js
<script>
var vm = new Vue({
el: 'body',
data: {
active: {},
nameIsText: true,
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(index) {
this.active = index;
},
switchNameTag: function() {
this.nameIsText = !this.nameIsText;
},
},
computed: {
activeNote: function() {
return this.notes[this.active];
},
},
});
</script>
我制作了一个简单的笔记应用程序,如果您单击一个笔记,则会显示一个带有文本的文本区域和一个带有名称的标题 2。现在,如果您单击<h2></h2>
-Tags 中的名称,标题 2 将替换为输入字段 - 因此用户可以编辑当前注释的名称。
一切正常,除了当我在输入字段中编辑名称(名称是计算属性)时,名称没有更新。第二个问题是,如果我在编辑一个便笺的名称后单击另一个便笺,则旧便笺的名称仍保留在输入字段中,而不是显示新单击便笺的名称。
我添加了两张图片以便更好地理解:
所以我的(可能相关的)问题是,如何在输入字段中编辑计算属性,并显示新点击的笔记的名称,即使我在输入字段中编辑名称后没有按 Enter 键?