Vue JS 更新由用户输入计算 属性
Vue JS update computed property by user input
我的问题是用用户的输入替换计算的 属性 的值。我的设置是这样的:
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>
我做了一个简单的 note-app,如果您单击一个注释,将显示一个带有文本的文本区域和一个带有名称的标题 2。
现在,如果您单击 <h2></h2>
-标签中的名称,标题 2 将替换为输入字段 - 因此用户可以编辑当前笔记的名称。
一切正常,除了以下事实:当我在输入字段中编辑名称(名称是计算的 属性)时,名称没有更新。第二个问题是,如果我在编辑一个笔记的名称后单击另一个笔记,旧笔记的名称将保留在输入字段中,而不是显示新单击的笔记的名称。
我添加了两张图片以便更好地理解:
名称为 h2
名称作为输入
所以我的(可能相关的)问题是,如何在输入字段中编辑计算的 属性,并显示新点击的笔记的名称,即使我在编辑后没有按回车键输入字段中的名称?
您想对正在编辑的项目使用 v-model
绑定。这些为您提供了双向绑定,可以主动更新基础数据项。
还需要使用 v-if
而不是 v-show
因为 activeNote
可以是未定义的,在这种情况下访问其成员是错误的。
<div class="col-md-9" v-if="activeNote">
<h2 v-show="nameIsText" @click="switchNameTag()">{{activeNote.name}}</h2>
<input class="form-control" v-show="!nameIsText" @keyup.enter="switchNameTag()" v-model="activeNote.name">
<textarea name="note-text" class="form-control" rows=10 v-model="activeNote.text"></textarea>
</div>
我的问题是用用户的输入替换计算的 属性 的值。我的设置是这样的:
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>
我做了一个简单的 note-app,如果您单击一个注释,将显示一个带有文本的文本区域和一个带有名称的标题 2。
现在,如果您单击 <h2></h2>
-标签中的名称,标题 2 将替换为输入字段 - 因此用户可以编辑当前笔记的名称。
一切正常,除了以下事实:当我在输入字段中编辑名称(名称是计算的 属性)时,名称没有更新。第二个问题是,如果我在编辑一个笔记的名称后单击另一个笔记,旧笔记的名称将保留在输入字段中,而不是显示新单击的笔记的名称。
我添加了两张图片以便更好地理解:
名称为 h2
所以我的(可能相关的)问题是,如何在输入字段中编辑计算的 属性,并显示新点击的笔记的名称,即使我在编辑后没有按回车键输入字段中的名称?
您想对正在编辑的项目使用 v-model
绑定。这些为您提供了双向绑定,可以主动更新基础数据项。
还需要使用 v-if
而不是 v-show
因为 activeNote
可以是未定义的,在这种情况下访问其成员是错误的。
<div class="col-md-9" v-if="activeNote">
<h2 v-show="nameIsText" @click="switchNameTag()">{{activeNote.name}}</h2>
<input class="form-control" v-show="!nameIsText" @keyup.enter="switchNameTag()" v-model="activeNote.name">
<textarea name="note-text" class="form-control" rows=10 v-model="activeNote.text"></textarea>
</div>