タグから選択してプロパティとして使用する - vuejs

Question

私は選択タグからプロパティを取得しようとしており、プロパティオブジェクトで使用しています。ここ は私のhtmlです：ここでは

<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と次のとおりです。

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

：

はおそらく、あなたはこれを行うためのもの