Question

VUE variable.length 在模板中有效，但给出控制台警告

2016-11-27

18784

warnings vue.js string-length

我有一个模板，需要知道所提供变量的长度...

{{ prefix }} {{ prefix.length }}

它输出了正确的信息，似乎工作正常，但它给出了这个警告：

[Vue warn]: Error when evaluating expression "{ input_prefix: (prefix.length > 0)}": TypeError: Cannot read property 'length' of undefined (found in component: )

我真的很想做对，并摆脱警告。有什么想法吗？

致以最诚挚的问候 John Lajer

Answer 1

如果前缀为空或未定义，根据定义，它不能具有长度。

因此，通过三元运算符呈现长度，如果前缀存在则使用长度属性，如果前缀不存在则默认为零：

{{ prefix && prefix.length ? prefix.length : 0 }}

Answer 2

正如 David 指出的那样，当值为 null/未定义时，您将遇到问题。

我会使用计算变量来解决这个问题。

例如

new Vue({
  el: '#app',
  data: {
    prefix: 'Some value'
  },
  computed: {
    prefixLength: function(){
      if(this.prefix){
        return prefix.length
      }
      return '';
    }
  }
})

然后您只需在模板中使用它：

{{ prefix }} {{ prefixLength }}

Answer 3

new Vue({
  el: '#app',
  data: {
    prefix: 'Some value'
  },
  computed: {
    prefixLength: function(){
      if(this.prefix){
        return this.prefix.length
      }
      return '';
    }
  }
})

然后您只需在模板中使用它：

{{ prefix }} {{ prefixLength }}