VUE variable.length在模板中工作，但会发出控制台警告

Question

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

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

它吐出了正确的信息，似乎工作得很好，但它给出了以下警告：

[Vue warn]：计算表达式{input_prefix:（prefix.length）时出错

我真的很想把它做好，摆脱警告。有什么想法吗？

向约翰·拉杰问好

Answer 1

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

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

{{ prefix }} {{ prefixLength }}

Answer 2

当值为null/未定义时，您将面临David指出的问题。

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

前任。

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

然后你只需要在你的模板中使用这个：

{{ prefix }} {{ prefixLength }}

Answer 3

若前缀为null或未定义，根据定义，它不能有长度。

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

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