Javascript funkcja

Question

      deleteNote: function(e) {
          //Id elementu
            var idObject = Number(e.target.parentElement.getAttribute('id'));
            alert(idObject);
          //Porownuje do tablicy
          let arrayPostslength = this.arrayPosts.length;
          for(var i = 0; i < arrayPostslength; i++) {
                if(this.arrayPosts[i].noteId === idObject) {
                    console.log(this.arrayPosts[i]);
                }
                else {
                    return;
                }
          }
      }

Hej, mam taką funkcję i nie mogę zrozumieć dlaczego działa mi tylko na pierwszego diva if i w konsoli wyseitla odpowiedni obiekt, jak klikne 1,2,3 itd. nie działa, tylko ostatni.

Tak wygląda tablica 

arrayPosts: [

{text: 'adasd' .....},

---||---

]

beforeMount() {
      if(localStorage.getItem('posts')) {
          this.arrayPosts = JSON.parse(localStorage.getItem('posts'));
      }
      else {
          return;
      }
  },

Gdy cos było zapisane w LS to wypełni ją jak nie to nie.

Tak wyglada funkcja dodajaca obiekt do tablicy 

addNewPost: function() {
          var getData = new Date();
          if(this.textPost === '') {
              alert('Wpisz coś');
          }
          else {
          this.arrayPosts.unshift({
              noteId: this.arrayPosts.length,
              text: this.textPost,
              data: getData.toLocaleString(),
              star: this.starInPost
          });
            localStorage.setItem('posts', JSON.stringify(this.arrayPosts));
            this.textPost = '';
          }
      }

A tak wgylada caly kod html podanego diva

<!--Post-->

            <div v-for="post,i in arrayPosts" v-bind:id="post.noteId" v-bind:key="i">
                <button v-on:click="deleteNote">x</button>
                <div>
                    <img v-bind:src="avatarPost" alt="Avatar">
                    <i v-show="post.star" title="Ważny post" class="demo-icon icon-star"></i>
                </div>
                <div >
                    <p>Opublikowany: {{post.data}}</p>
                    <p>{{post.text}}</p>
                </div>
            </div>

<!-- END Post-->

 

Comments

Powiem szczerze, że przydałby się większy kawałek kodu bo nie do końca rozumiem co się tutaj dzieje. Wrzuć fragment html z tymi divami i najlepiej cały ten obiekt

---

edytowałem post

Answer 1

Pierwszy fragment kodu, linia 12

Wychodzisz z funkcji, jeśli pierwszy note nie pasuje.

---

Swoją drogą, zamiast szukać id po atrybutach elementu

var idObject = Number(e.target.parentElement.getAttribute('id'));

Przekaż je przy wywoływaniu metody:

v-on:click="deleteNote(post.noteId)"

I dalej w metodach będziesz miał:

deleteNote: function (id) {

---

Przy usuwaniu elementu z tablicy, możesz użyć po prostu filter