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

【问题标题】：Binding length of one object from $data to another object一个对象从 $data 到另一个对象的绑定长度
【发布时间】：2017-09-26 13:56:07
【问题描述】：

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

#实际发生了什么？

未捕获的类型错误：无法读取未定义的属性“长度”

{ id: "4", name: "All", value: null } 的值应始终与项目长度绑定

【问题讨论】：

标签： vue.js

【解决方案1】：

谢谢@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
    }
  }

【讨论】：

【解决方案2】：

更新：这看起来像是我在原始答案中给出的一般规则的一个例外（仍在下方）。为了避免每次都重新生成选项列表，您可以添加一个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
    })
  }
}

【讨论】：