VueJS 版本

2.1.10

复现链接

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

预期结果是什么？

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

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

应绑定到 items 的长度。

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：无法读取未定义的属性“length”

{ id: “4”,名称：“All”,值：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
    }
  }