0

私の問題は、計算されたプロパティの値をユーザーの入力に置き換えることです。私のセットアップは次のようなものです：

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>

簡単なメモ アプリを作成しました。1 つのメモをクリックすると、テキストのテキスト領域と名前の見出し 2 が表示されます。タグ内の名前をクリックする<h2></h2>と、見出し 2 が入力フィールドに置き換えられるため、ユーザーは現在のメモの名前を編集できます。

入力フィールドで名前を編集すると (名前は計算されたプロパティです)、名前が更新されないという事実を除いて、すべてが機能します。2 つ目の問題は、1 つのメモの名前を編集した後に別のメモをクリックすると、新しくクリックしたメモの名前が表示される代わりに、古いメモの名前が入力フィールドに残ることです。

理解を深めるために、次の 2 つの図を追加しました。

入力としての h2名としての名前名前はh2 入力としての名前

私の（おそらく関連する）質問は、入力フィールドで計算されたプロパティを編集し、入力フィールドで名前を編集した後にEnterキーを押さなくても、新しくクリックされたメモの名前を表示するにはどうすればよいですか?

4

1 に答える 1

1

v-model編集中のアイテムにバインディングを使用したい。これらは、基になるデータ項目をアクティブに更新する双方向バインディングを提供します。

未定義の可能性があるため、v-if代わりに使用する必要もあります。その場合、そのメンバーへのアクセスはエラーになります。v-showactiveNote

<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>

フィドル

于 2016-08-23T14:27:31.327 に答える