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

Question

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 1

It may help to use VueJS' $refs

Assigning a ref to your elements gives you access to the specifically named DOM element within your component via a $refs property on this e.g

<div ref="myDiv">I'm a div</div> // = { myDiv: [DOMELEMENT] }

created () { 
  console.log(this.$refs.myDiv.innerHTML) // I'm a div
}

By using refs you should be able to use querySelector to query child elements of parent elements and vice versa.

Answer 2

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.

Answer 3

Well, found the solution myself, thanks everyone for help!

Updated code :

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) {
            var t = $(e.target)
                .parent()
                .find(".card-title")
                .html();
            for (i = 0; i < localStorage.length; i++) {
                if (localStorage.key(i) == t) {
                    localStorage.removeItem(localStorage.key(t));
                    location.reload(true);
                }
            }
        }
    },
    created: function() {
        for (i = 0; i < localStorage.length; i++) {
            this.notes[localStorage.key(i)] = [
                localStorage.getItem(localStorage.key(i)),
                "red"
            ];
        }
    }
});

Answer 4

with jQuery you can get an elements parent element with .parent(). So in this case you should be able to do this to get the html you're looking for:

$(this).parent().find('.card-title').html()