1

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

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

下面的代码工作正常，但如果我们改变： data: { record: { category_id: null } }通过data: { record: {} }它停止工作！

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

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

编辑：对不起，伙计们刚刚修复了小提琴链接

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>

4

1 回答 1

2

因此，您正在尝试编辑尚未到达的值？:-)

事情是：此刻v-model="record.category_id"是“执行”，你什么都没有，即“记录”对象没有“category_id”。所以，它什么都没有。这就是为什么如果您在初始化select时省略“category_id”将不起作用的原因。data

但是您假设当数据从服务器（ajax 调用）到达时组件将不起作用，这是错误的。

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

  1. 首先，在单击按钮之前使用下拉菜单：由于它没有绑定任何内容，因此不会更新任何内容。这是对的。

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

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

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

于 2016-10-13T12:36:41.733 回答