HTML要素にVue 'ひげそり'の角かっこを入力してください

Question

私はVue JSを学んでいます。私は1つの問題を持っている私は何かを得るのが難しいと思っている。 {{fooBar}}の実際の名前をHTML要素に見つけることができないのですか？具体例...

<!-- {{ tweet }} TO BE INJECTED BELOW --> 
    <textarea cols="60" rows="4"></textarea> 

{{tweet}}をtextarea要素に挿入したいと考えています。私の実際の例では、テキストエリアのHTML自体にアクセスして変更することができないからです。私はjQuery .val（）を使って{{tweet}}を注入しようとしましたが、それはプレーンテキストです。 This CodePenは状況を説明するのに役立ちます。

これを単純に行うことができない場合は、アクセスできないテキスト領域を動的にバインドするための方法がありますか？ Vue.js documentationから

Answer 1

：テキストエリアに

補間（{{テキストは}}）動作しません。 代わりにv-modelを使用してください。だから、jQueryを使って

、あなたは単にあなたのテキストエリアにv-model属性を追加しようとすることができ

...

$(function() { 
 
    $('textarea').attr('v-model', 'text'); 
 
    var vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     text: 'Lorem ipsum...' 
 
    } 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <h1>{{ text }}</h1> 
 
    <textarea></textarea> 
 
</div>