Vue.js get element’s html value by clicking on it’s neighboring element

Hello everyone I’m building a simple notes app and I can’t figure out how to implement one feature.

I have a card element and delete button as a child of this element. I need to check if the card element child’s(.card-title) html value(jQuery’s .html()) is equal to the localStorage(I’m using for to loop through the localStorage object) key by clicking on Delete button(that is a child of the card element alongside with the card’s title) .Then, if true, I need to delete the localStorage item by key that is equal to the .card-title’s html value.

So basically I have

• .card
  • .card-title (with html value I need to get)
  • .card-body (nothing to do with it)
  • .delete-button (by clicking on it I need to get .card-title’s html value)

That’s only my point of view, which, most likely, is wrong. So, maybe, there is a better approach for deleting notes in my app?

Any ideas?

Full code on CodePen

Thank you very much for spending your precious time with my issue! Thank you for any help!

So I have a code like this :

<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

so i built this very simple app so you can check it out 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 : []  
}
})

it doesn’t use jquery, only vuejs, I think it is better this way

simply create an array contains ‘note’ objects where each one have title and body.

Tell me if you have any questions.