组件Vuejs2声明$data obj在组件之间共享数据

Question

I am trying to make a Vue2 component to all the select of my app so would be easier later to change it if necessary!

I've based my research on the example given by the docs and I am breaking my head to figure out why should I speficy all the object on the data attr to make it work!

The following code is working properly, but if we change: data: { record: { category_id: null } } by data: { record: {} } it stop to work!

Must be said the $data.record is loaded by ajax... would I always specify the whole object even knowing that after the ajax request I am going to replace all with something like this.record = response.data ?

If somebody need there is FIDDLE [ https://jsfiddle.net/gustavobissolli/4xrfy54e/1/ ]

EDIT: SORRY GUYS JUST FIXED FIDDLE LINK

 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

So you are trying to edit a value which didn't arrive yet? :-)

The thing is: at the moment v-model="record.category_id" is "executed", you have nothing there, ie, there is no "category_id" at the "record" object. So, it binds to nothing. This is why the select won't work if you omit the "category_id" at data initialization.

But your assumption that when data arrives from server (ajax call) the component will not work, is wrong.

I have updated your fiddle: https://jsfiddle.net/4xrfy54e/4/

1. First, use the dropdown before clicking the button: since it is binded to nothing, it will not update anything. This is correct.

2. Now, click the button. The button is simulating that data arrived from the server, and is assigned to this.record of the vm.

3. Play with the dropdown again: since record.category_id exists now, the binding is working fine.

Please, read the " Reactivity in Depth " documentation page, and you will stop breaking your head :-)