コンポーネントVuejs2は、コンポーネント間でデータを共有するために$ data objを宣言します。

Question

私はすべてのアプリケーションにVue2コンポーネントを作成しようとしていますので、

私は、ドキュメントによって与えられた例について私の研究に基づいており、私はデータアトリプタ上のすべてのオブジェクトが動作するようにすべき理由を理解するために頭を悩ましています！

次のコードは正常に動作していますが、変更した場合： data: { record: { category_id: null } }とdata: { record: {} }は動作を停止します。

$ data.recordはajaxによって読み込まれていると言わなければなりません...私はいつも、ajaxリクエストの後にすべてを置き換えるつもりであることを知っていてもオブジェクト全体を指定しますか？this.record = response.data？

誰かが[https://jsfiddle.net/gustavobissolli/4xrfy54e/1/]

EDIT FIDDLEがある必要がある場合：JUST FIXEDフィドルLINK SORRY GUYS

Vue.component('select2', { 
 
    props: ['options', 'value'], 
 
    template: '#select2-template', 
 
    data() { 
 
    return { 
 
     model: '' 
 
    } 
 
    }, 
 
    mounted: function() { 
 
    this.model = this.value 
 
    }, 
 
    watch: { 
 
    value: function(value) { 
 
     this.model = value 
 
    }, 
 
    model: function(value) { 
 
     this.$emit('input', value) 
 
    }, 
 
    } 
 
}) 
 

 
var vm = new Vue({ 
 
    el: '#el', 
 
    template: '#demo-template', 
 
    data: { 
 
    record: { 
 
     category_id: null 
 
    }, 
 
    options: [{ 
 
     id: 1, 
 
     text: 'Hello' 
 
    }, { 
 
     id: 2, 
 
     text: 'World' 
 
    }] 
 
    } 
 
})

<div id="el"></div> 
 

 
<!-- using string template here to work around HTML <option> placement restriction --> 
 
<script type="text/x-template" id="demo-template"> 
 
    <div> 
 
    <pre>{{ $data | json }}</pre> 
 
    <select2 :options="options" v-model="record.category_id" value="record.category_id"></select2> 
 
    </div> 
 
</script> 
 

 
<script type="text/x-template" id="select2-template"> 
 
    <select v-model="model"> 
 
    <option disabled>Select...</option> 
 
    <option v-for="opt in options" :value="opt.id">{{ opt.text }}</option> 
 
    </select> 
 
</script>

Answer 1

だから、あなたはしなかった値を編集しようとしているが、まだ到着していますか？ :-)

事がある：現時点v-model="record.category_id"で「実行」されて、あなたはそこに何もを持っていない、すなわち、「記録」対象でない「CATEGORY_IDは」ありません。それで、それは何にも結びついていません。このため、dataの初期化時に "category_id"を省略すると、selectは機能しません。

しかし、サーバー（ajax呼び出し）からデータが到着したときにコンポーネントがうまく動作しないと誤っていることを前提としています。

私はあなたのフィドルを更新しました：https://jsfiddle.net/4xrfy54e/4/

1. まず、ボタンをクリックする前に、ドロップダウンを使用します。それは何にバインドされているので、それは何も更新されません。これは正しいです。

2. ここでボタンをクリックします。このボタンは、サーバーからデータが到着したことをシミュレートしており、vmのthis.recordに割り当てられています。

3. もう一度プルダウンしてください：record.category_idが存在するため、バインディングは正常に動作しています。

、 "Reactivity in Depth" ドキュメントページを読んで、そしてあなたは、J-ブルーニ感謝@