Question

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

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

它会发出正确的信息并且似乎工作得很好，但它会发出警告：

[Vue警告]：评估表达式时出错＆＃34; {input_prefix：（prefix.length＆gt; 0）}＆＃34;：TypeError：无法读取属性＆＃39; length＆＃39;的 undefined（在组件中找到）

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

祝你好运 John Lajer

Answer 1

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

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

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

Answer 2

如David所指出的，当值为null / undefined时，您将遇到问题。

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

实施例

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

VUE variable.length在模板中工作，但提供控制台警告

3 个答案: