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

Question

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

我的研究基于文档给出的示例，我绞尽脑汁想弄清楚为什么我应该在数据属性上指定所有对象才能使其工作!

下面的代码可以正常工作，但是如果我们改变: data: { record: {category_id: null } } by data: { record: {} } 它停止工作了!

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

如果有人需要，可以使用 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” ” 在“记录”对象处。因此，它与任何东西都没有绑定(bind)。这就是为什么如果您在 data 初始化时省略“category_id”，select 将无法工作。

但是您认为当数据从服务器到达(ajax 调用)时组件将无法工作的假设是错误的。

我已经更新了你的 fiddle :https://jsfiddle.net/4xrfy54e/4/

1. 首先，在单击按钮之前使用下拉列表:由于它没有绑定(bind)任何内容，因此不会更新任何内容。这是正确的。

2. 现在，单击按钮。该按钮模拟数据从服务器到达，并分配给虚拟机的 this.record。

3. 再次使用下拉菜单:由于 record.category_id 现在存在，因此绑定(bind)工作正常。

请阅读“Reactivity in Depth ”文档页面，这样您就不会再伤脑筋了:-)