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

Question

我正在尝试为我的应用程序的所有选择制作一个 Vue2 组件，以便以后在必要时更容易更改它！

我的研究基于文档给出的示例，我正在努力弄清楚为什么我要在数据属性上指定所有对象以使其正常工作！

以下代码可以正常工作，但如果我们更改： data: { record: { category_id: null } } data: { record: {} } 它停止工作！

必须说 $data.record 是由 ajax 加载的...即使知道在 ajax 请求之后我将用 this.record = response.data 之类的东西替换所有对象，我是否总是指定整个对象？

如果有人需要 FIDDLE [https://jsfiddle.net/gustavobissolli/4xrfy54e/1/]

编辑：抱歉，刚刚修复了 FIDDLE 链接

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. 现在，单击按钮。该按钮模拟从服务器到达的数据，并分配给虚拟机的this.record。

3. 再次使用下拉菜单：由于 record.category_id 现在存在，绑定工作正常。

请阅读“Reactivity in Depth”文档页面，你不会再头疼了:-)