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

Question

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

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

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

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

这样的东西

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

编辑：抱歉，伙计们，刚刚修复了 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

所以您正在尝试编辑一个尚未到达的值？ :-)

事情是：目前 v-model="record.category_id" 是 "executed"，那里 什么都没有 ，即没有 "category_id" "record" 对象。所以，它没有任何约束力。这就是为什么如果您在 data 初始化时省略 "category_id"，select 将不起作用。

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

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

首先，在单击按钮之前使用下拉列表：因为它没有绑定任何内容，所以不会更新任何内容。这是正确的。
现在，单击按钮。该按钮模拟数据从服务器到达，并分配给虚拟机的 this.record。
再次使用下拉菜单：由于 record.category_id 现在存在，绑定工作正常。

请阅读“Reactivity in Depth”文档页面，您将不再伤脑筋:-)

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

Component Vuejs2 declare $data obj to share data between components

javascript

ecmascript-6

vue.js

vuejs2