javascript - Vue.js 通过单击相邻元素来获取元素的 html 值

Question

大家好，我正在构建一个简单的笔记应用程序，但我不知道如何实现一项功能。

我有一个卡片元素和删除按钮作为该元素的子元素。我需要通过单击“删除”按钮(即是卡元素的子元素以及卡的标题)。然后，如果为 true，我需要通过等于 .card-title 的 html 值的键删除 localStorage 项。

所以基本上我有

• .card
  • .card-title(带有我需要获取的html值)
  • .card-body(与之无关)
  • .delete-button(通过点击它我需要获取.card-title的html值)

这只是我的观点，很可能是错误的。那么，也许有更好的方法来删除我的应用程序中的笔记？

有什么想法吗？

Full code on CodePen

非常感谢您花费宝贵的时间来解决我的问题!感谢您的帮助!

所以我有这样的代码:

<div id="notes">
  <div class="container">
    <div class="form-group">
      <label for="title">Enter title</label>
      <input class="form-control" id="title"/>
    </div>
    <div class="form-group">
      <label for="body">Enter body</label>
      <textarea class="form-control" id="body"></textarea>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" @click="add">Add</button>
      <button class="btn btn-danger" @click="clear">Delete all</button>
    </div>
    <div class="card" v-for="o,t,b,c in notes">
      <div class="card-body">
        <h5 class="card-title">{{t}}</h5>
        <p class="card-text">{{o[b]}}</p>
        <a class="card-link" @click="remove">Delete</a>
      </div>
    </div>
  </div>
</div>

new Vue({
    el: "#notes",
    data: {
        notes: {}
    },
    methods: {
        add: function() {
            localStorage.setItem($("#title").val(), $("#body").val());
            location.reload(true);
        },
        clear: function() {
            localStorage.clear();
            location.reload(true);
        },
        remove: function(e) {
            for (i = 0; i < localStorage.length; i++) {
                if (
                    localStorage.key(i) ==
                    $(this)
                    .closest(".card")
                    .find(".card-title")
                    .html()
                ) {
                    alert(true);
                }
            }
        }
    },
    created: function() {
        for (i = 0; i < localStorage.length; i++) {
            this.notes[localStorage.key(i)] = [
                localStorage.getItem(localStorage.key(i)),
                "red"
            ];
        }
    }
});

Answer 1

所以我构建了这个非常简单的应用程序，以便您可以查看 https://jsfiddle.net/vrxonsq1/2/

new Vue({
el:"#app",
data:{
form:{
    title:"",
    body:""
},
notes:[]
},
methods:{
add: function(){
    this.notes.push({
    title: this.form.title,
    body: this.form.body
  });
  this.form.title = "";
  this.form.body = "";
  this.save();
},
remove: function(title){
        this.notes.forEach(function(note,index){
    if (note.title == title){
        this.notes.splice(index,1);
    }
  })
  this.save();
},
save: function(){
    localStorage.setItem("notes", JSON.stringify(this.notes) );
}
},
created: function(){
notes = JSON.parse(localStorage.getItem("notes") );
this.notes = notes ? notes : []  
}
})

它不使用jquery，只使用vuejs，我认为这样更好

只需创建一个包含“注释”对象的数组，其中每个对象都有标题和正文。

如果您有任何疑问，请告诉我。