Question

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

我的研究基于文档给出的示例，我正在弄清楚为什么要将数据attr上的所有对象设置为使其工作！

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

必须说$ data.record是由ajax加载的......我总是会指定整个对象，即使知道在ajax请求后我要用this.record = response.data替换所有内容吗？

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

编辑：抱歉的家伙只是固定的儿童话题链接

＆＃13;

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'
    }]
  }
})

＆＃13;

<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>

＆＃13;

Answer 1

所以你试图编辑一个尚未到达的值？： - ）

事情是：目前v-model="record.category_id"被执行＆＃34;，那里有没有，即没有＆＃34; category_id＆＃34;在＆＃34;记录＆＃34;宾语。所以，它什么都没有。这就是为什么select如果省略＆＃34; category_id＆＃34;在data初始化。

但是你的假设是，当数据从服务器（ajax调用）到达时，组件将无法正常工作，这是错误的。

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

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

请阅读＆＃34; Reactivity in Depth＆＃34;文档页面，你将不再打破头脑： - ）

组件Vuejs2声明$ data obj以在组件

1 个答案: