将一个对象的长度从$ data绑定到另一个对象

Question

VueJS版本

2.1.10

复制链接

http://codepen.io/sumitridhal/full/ybVGZa/

期待什么？

创建自定义选择输入并将最后一个值绑定到数据中的项目对象。

<select class="form-control xsmall" v-
model="options.limit.value">
  <option v-for="option in options.availableOptions" v-bind:value="option.value">
    {{ option.name }}
  </option>
</select>

选项数组中的对象

{
          id: "4",
          name: "All",
          value: null
}

应该绑定项目的长度。

var app = new Vue({
  // app initial state
  data: {
    title: "VueJS 2.1x CURD Application",
    items: v_items,

    options: {
      availableOptions: [
        {
          id: "1",
          name: "5",
          value: 5
        },
        {
          id: "2",
          name: "10",
          value: 10
        },
        {
          id: "3",
          name: "15",
          value: 15
        },
        {
          id: "4",
          name: "All",
          value: null
        }
      ],
      limit: {
        id: "1",
        name: "5",
        value: 5
      } //This sets the default value of the select in the ui
    }
  }
})

＃实际发生了什么？

未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;未定义的

{id：＆＃34; 4＆＃34 ;, name：＆＃34; All＆＃34;，value：null}的值应始终与项目长度绑定

Answer 1

更新： 这看起来像我在原始答案（仍在下面）中给出的一般规则的例外。为避免每次都重新生成选项列表，您可以添加只更新最后一项值的watch：

  watch: {
    items: {
      handler: function(items) {
        this.options.limit.value = items.length;
      },
      deep: true
    },
    items: function() {
      this.options.availableOptions[this.options.availableOptions.length - 1].value = this.items.length;
    }
  }

原始答案：

作为一般规则，任何从其他地方获得价值的东西都应该是computed。有一个正常项的数据数组，然后使用一个计算器返回那些加上长度项。类似的东西：

computed: {
  availableOptionsPlus() {
    return this.availableOptions.concat({
      id: this.availableOptions.length + 1, // counting itself
      name: "All",
      value: this.items.length
    })
  }
}

Answer 2

谢谢@ roy-j。还需要设置options.limit.value绑定。 查看http://codepen.io/sumitridhal/full/ybVGZa/

computed: {
    availableOptionsPlus: function() {
      this.options.limit.value = this.items.length;
      return this.options.availableOptions.concat({
        id: this.options.availableOptions.length + 1, // counting itself
        name: "All",
        value: this.items.length
      });
    }
  }

也是设置limit.value

的项目的观察者

 // watch items change 
  watch: {
    items: {
      handler: function(items) {
        this.options.limit.value = items.length;
      },
      deep: true
    }
  }