Question

我的问题是用用户输入替换计算属性的值。我的设置是这样的：

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> - 标签中的名称，标题2将被输入字段替换 - 因此用户可以编辑当前音符的名称。

除了事实之外，当我在输入字段中编辑名称（名称是计算属性）时，一切都有效，名称不会更新。第二个问题是，如果在编辑一个音符的名称后单击另一个音符，则旧音符的名称将保留在输入字段中，而不是显示新单击音符的名称。

我已经添加了两张图片以便更好地理解：

名称为h2 输入名称

所以我的（可能是相关的）问题是，我如何编辑输入字段中的计算属性，并显示新点击的注释的名称，即使我在编辑输入中的名称后没有按Enter键场？

Answer 1

您希望对正在编辑的项目使用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>

Fiddle

Vue JS通过用户输入

1 个答案: