태그에서 선택하여 속성으로 사용 - vuejs

Question

선택 태그에서 속성을 가져 와서 속성 개체에서 사용하려고합니다.

다음

<div id="app"> 
    <h3>{{title}}</h3> 
    <div class="form"> 
     <div class="form-group"> 
      <div class="form-group"> 
       <label>Note Title</label> 
       <input class="form-control" type="text" v-model="note.title"> 
      </div> 
      <div class="form-group"> 
       <label>Note text</label>       
       <textarea class="form-control" v-model="note.text"></textarea> 
      </div> 
      <div class="form-group"> 
       <label>Cor</label>       
        <select v-model="note.cor"> 
          <option disabled value="">Selecione a cor</option> 
          <option value="blue">Azul</option> 
          <option value="green">Verde</option> 
        </select> 
        <span>Cor Selecionada: {{ note.cor }}</span> 
      </div> 
      <button class="btn btn-primary" @click="addNote">Submit</button> 
     </div> 
     <div class="col-sm-12"> 
      <div class="col-sm-4" v-for="(note, index) in notes"> 
       <button class="close" @click="removeNote(index)">&times;</button> 
       <div class="card-block"> 
        <h4 class="card-title" v-bind:style="{ color: note.cor }">{{note.title}}</h4> 
        <h6 class="card-subtitle mb-2 text-muted">{{note.date}}</h6> 
        <p class="card-text">{{note.text}}</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

는 JS입니다 : 여기 내 HTML입니다

var app = new Vue({ 
    el: '#app', 
    data: { 
     title: 'Notemaster', 
     note: { 
      title: '', 
      text: '', 
      cor: '' 
     }, 
     notes: [ 
      { 
       title: 'Visit Hawaii', 
       text: 'just kiddind lol', 
       date: new Date(Date.now()).toLocaleString(), 
       cor:'blue' 
      } 
     ] 
    }, 
    methods: { 
     addNote() { 
      let { text, title } = this.note 
      this.notes.push({ 
       text, 
       title, 
       date: new Date(Date.now()).toLocaleString(), 
       cor 
      }) 
     }, 
     removeNote(index) { 
      <!-- apaga o número de itens dispostos no segundo parametro--> 
      this.notes.splice(index, 1) 
     } 
    } 
}); 

select 태그의 값은 <span>Cor Selecionada: {{ note.cor }}</span>에서 보여 작동

; 제목의 색상을 표시하기 위해 작동합니다. <h4 class="card-title" v-bind:style="{ color: note.cor }">{{note.title}}</h4> 하지만 새 메모를 만들 수 없습니다. 표시된 오류는 cor이 this.notes.push({ ... cor })에 정의되어 있지 않습니다. 미리 감사드립니다.

Answer 1

오류 메시지는 매우 자명하며, cor은 해당 범위에 정의되어 있지 않습니다.

let { text, title, cor } = this.note 
        ^^^ 

:

은 아마 당신은이 일을 의미