Vue.js arrrayのアイテムを削除します

Question

1.iを削除するには、vue.jsコンポーネントのメソッド内のリンク コンソールでのエラーはメソッドスプライスが定義されていません。 insert.messageのメッセージに問題がない場合は、 リンクが追加されます。 リンクを挿入しても問題ありませんが、削除することはできません。私の単一page.butで プッシュアレイのユーザーのために良いではない場合は、あなたがデータにアクセスするすべてのプロパティを事前に定義する必要が

 <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); 
    } 
    } 
};   

Answer 1

除去することが可能です。

は、現代のJavaScript（および Object.observeの放棄）の制限により、Vueのは、プロパティの追加や削除を検出することはできません。あなたのコードmessagesとlinksで

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

開始時に、あなたのデータオブジェクトで定義されていないので、反応は動作しません。

たとえば、次のコードは動作しません：

<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/

しかし、メッセージが起動時に定義されているため、このコードは動作します。

<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/

注：そこにあなたのコード内の他のエラーことができますが、最初にこれを修正する必要がある場合があります。