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

제거하는 것이 가능하다.

현대 자바 스크립트 (및 Object.observe의 포기)의 한계로 인해, 뷰는 속성 추가 또는 삭제를 검색 할 수 없습니다. 코드 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/

주 :이 코드에서 다른 오류 일 수 있지만, 처음이 일을 해결해야 할 수도 있습니다.