Vue.js remove item in arrray

Question

1.i want to remove Link in the method from a vue.js component please helm me..error in console is method splice is undefined. link will add when the message in insert.message is not a problem. insert link in not a problem.but it's not possible to remove. push array in my single page.but if is not good for the user is possible to remove

     <div class="list-group">
                          <div class="col-lg-4" style="margin-
   top:3px">
                            <input type="text" v-model="link.title" 
            class="form-control" placeholder="titolo" id="title">
                          </div>
                          <div class="col-lg-7">
                            <input type="text" v-model="link.hyperlink" 
            class="form-control" placeholder="link" id="link">
                          </div>
                          <div class="col-lg-1">
                            <button @click="addLink" type="button" 
                  id="add-link-btn" class="btn btn btn-primary pull-
                     right">+</button>

                          </div>
                        </div>
                        </div>
                        <div v-for="link in message.links" 
                       :key="link.id">
                       <div class="row">
                            <div class="col-lg-6">
                              <p>{{link.title}}</p>

                            </div>
                            <div class="col-lg-6">
                              <a>{{link.hyperlink}}</a>
                               <button class="btn btn-xs btn-danger" 
                           @click="removeLink(link)">Delete</button>
                            </div>
                          </div>
               <scrip>

   data() {
    return {
      title: "Aggiungi",
      link: {
        id: 1,
        autore: "Amedeo",
        title: "",
        hyperlink: ""
      },
}
}
methods: {
    addMessage() {
      var id = this.messages.length
        ? this.messages[this.messages.length - 1].id
        : 0;
      var message = Object.assign({}, this.message);
      message.id = id + 1;
      message.date = new Date();
      this.messages.push(message);

      this.message.title = "";
      this.message.subtitle = "";
      this.message.body = "";
    },
    // metodo addlink che inserisci un nuovo link ovvimente lavorando 
    sul id del messaggio padre
    addLink() {
      var messageId = this.messages.length
        ? this.messages[this.messages.length - 1].id
        : 1;
      var id = this.message.links.length
        ? this.message.links[this.message.links.length - 1].id
        : parseInt(messageId + "0", 10);
      var link = Object.assign({}, this.link);
      link.id = id + 1;
      link.date = new Date();
      this.message.links.push(link);

      this.link.title = "";
      this.link.hyperlink = "";
    },
    removeLink(link) {
      this.links.splice(this.links.indexOf(link), 1);
    }
  }
 };

your code is incomplete please format it and show your data(){} object — samayo
– samayo, Commented Nov 8, 2017 at 9:57
In your data(){} you have link object, but you are trying to splice links that is your error — samayo
– samayo, Commented Nov 8, 2017 at 10:10
change all this.links to this.link because inside your data(){} you don't have links object, you only have link — samayo
– samayo, Commented Nov 8, 2017 at 10:13

tony19 · Accepted Answer · 2022-07-15 05:22:31Z

You need to pre-define every property you will access in data.

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

In your code messages and links are not defined in your data object at the start, so the reactivity will not work.

For example, the following code doesn't work :

<div id="app">
  Message: {{message}}<br />
  <input type="text" v-on:input="update($event.target.value)" />
</div>
<script>
    new Vue({
    el: '#app',
  data: {
    
  },
  methods: {
    update: function(value) {
        this.message = value;
    }
  }
});
</script>

https://jsfiddle.net/m4q44g7f/

But this code works because message is defined at the start.

<div id="app">
  Message: {{message}}<br />
  <input type="text" v-on:input="update($event.target.value)" />
</div>
<script>
    new Vue({
    el: '#app',
  data: {
    message: ''
  },
  methods: {
    update: function(value) {
        this.message = value;
    }
  }
});
</script>

https://jsfiddle.net/m4q44g7f/1/

Note: There might be other errors in your code but you first need to fix this one.

Collectives™ on Stack Overflow

Vue.js remove item in arrray

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related