Question

使用vuejs编辑现有笔记的功能使用VUE.JS的WEB APP

此应用程序允许用户执行以下操作

制作新笔记
显示所有已创建笔记的列表
编辑现有笔记
删除现有注释

到目前为止我能够实现的目标

我可以创建一个新笔记，将其推入一个数组，并从数组中删除一个笔记。我发现编辑现有笔记有点困难。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  </head>
  <body>
    <!-- Main Div Holding our Application Data -->
    NOTE EDITOR WEB APP <br><br>
    <div id="notes">
      <!-- Panel for holding our input -->
      <input type="text" placeholder="Enter notes here?" autofocus class="text-input" v-model="newNote" v-on:keyup.enter="addNote">
      <!-- Unorderd list for holding our notes -->
      <ul>
        <li v-for="Note in NoteList">
          <label for="text">{{ Note.text }}</label>
          <button v-on:click="editNote(Note)">edit</button>
          <button v-on:click="removeNote(Note)">delete</button>
        </li>
      </ul>
    </div>
    <script>
      //Create a new Vue instance
      new Vue({

        //Binding Vue instance to our container div with an ID of notes
        el: "#notes",
        //This is where the data for our application will be held
        data: {

          newNote: "",
          NoteList: []
        },
        //This is where we will register the methods we want to use in our      application
        methods: {
          addNote: function() {

            //trim() is used to remove whitespace from both ends of a string
            var Note = this.newNote.trim();
            //if Note is not an empty string
            if (Note) {

              //Push an object containing the Note to the NoteList array
              this.NoteList.push({
                text: Note,
              });
              //Reset newNote to an empty string so the input field is cleared
              this.newNote = "";
            }
          },
          editNote: function(Note) { 
            // how to I function editing a note
          },
          removeNote: function(Note) {

            var index = this.NoteList.indexOf(Note);
            this.NoteList.splice(index, 1);
          }
        }
      });
    </script>
  </body>
</html>

Answer 1

以下是工作示例 - http://jsbin.com/wabepi/edit?html,js,output

模板部分：

<!-- Main Div Holding our Application Data -->
NOTE EDITOR WEB APP <br><br>
<div id="notes">
<!-- Panel for holding our input -->
<input type="text" placeholder="Enter notes here?" autofocus class="text-input" v-model="newNote" v-on:keyup.enter="addNote">
<ul>
  <li v-for="note in notes">
    {{ note.text }} <button @click="editNote(note)">EDIT</button>
    <input type="text" v-model="note.text" @blur="doneEdit(note)" v-show="note == activeEdit">
  </li>
</ul>
</div>

JS / Vue部分：

const app = new Vue({

  el: '#notes',

  data: {
    notes: [],
    newNote: '',
    activeEdit: null
  },

  methods: {
    addNote() {
      let note = this.newNote.trim()

      if(note) {
        this.notes.push({
          text: note
        })
        this.newNote = ''
      }
    },
    editNote(note) {
      this.activeEdit = note
    },
    doneEdit(note) {
      if (!this.activeEdit) {
        return
      }
      this.activeEdit = null
      note.text = note.text.trim()
    }
  }

})

因此，当用户点击编辑按钮时，我们将编辑注释的文本存储在名为activeEdit的变量中。

还有一个方法doneEdit，它也会记录参数并更新附加到编辑输入的v模型的note.text。

您可以查看官方的Todo MVC示例，同样的事情https://vuejs.org/v2/examples/todomvc.html

BTW：只有我在Chrome上遇到JSBin问题吗？有时，它只显示正在运行的应用程序，有时结果是空白的，没有控制台问题。

使用vuejs编辑现有笔记的功能

1 个答案: