をクリックすると、テキストが添付されます。どうやって？

Question

は私が機能して、このVueの材質（ヴューのJs）タグを持つ

<md-button id="" v-on:click.native="requestSelected(request)"> 


methods: { 

     requestSelected: function(request) { 
      request.accepted = true; 
      console.log(request); 

      var card = document.getElementById('text'); 
      var accept = document.createTextNode("Job selected"); 

      card.appendChild(accept); 

     } 

私は、誰かが情報を確認するために私にいくつかのVueのjs documentacionをしてくださいお勧めでき、クリックした後にDOMにいくつかのテキストを追加しようとしていますあなたのVueのコンポーネントで

Answer 1

、お使いのディスプレイのテキストのデータプロパティを作成します。次に

data() { 
    return { 
    displayText: '', 
    } 
} 

、ちょうどそうのようなあなたのテンプレートでdisplayTextへの参照を置く：

displayTextが空であるため、最初に何も表示されず、displayTextが変更されたときに自動的にDOMが更新されます。

あなたはそうのようなrequestSelected方法でテキストを変更します

requestSelected: function(request) { 
    request.accepted = true; 
    this.displayText = "Job selected"; 
} 

Here's an example in codepen.