Typescript 如何在vuetify中使用includes（）或indexOf（）？

我对vuetify中的这段代码有问题：

<template>
   ..... {{ countf(options[1], options[2], options[3], options[4], options[5]) }} ......
</template>


<script lang="ts">
export default Vue.extend({

data () {
  return {
    count: 1,
    str: ''
  }
},
   methods: {
      countf(a: any, b: any, c: any, d: any, e: any) {

      this.str = a.title;

        if (this.str.indexOf("Lapel") > -1) {
          this.count++;
        }
        return "Count = " + this.count;
      }
   }
 })
</script>

..... {{countf（选项[1]、选项[2]、选项[3]、选项[4]、选项[5]）}。。。。。。
导出默认Vue.extend({
数据（）{
返回{
计数：1，
str:'
}
},
方法：{
countf（a:any，b:any，c:any，d:any，e:any）{
this.str=a.title；
如果（这是一个“翻领”）>-1）{
这个.count++；
}
return“Count=”+this.Count；
}
}
})

---

我想在网页中显示

Count=2

，但每当我导航到此网页时，该网页就会挂起。任何人都可以提供帮助。

进一步阐述我的评论：浏览器冻结的原因是，应用程序的结构方式导致它在尝试任何渲染时进入无限递归：

呈现DOM时，将调用组件的

countf（）

方法

该方法递增

this.count

，并返回与以前不同的字符串

这会导致DOM更改，触发重新渲染，从而返回到步骤1，直到浏览器内存耗尽

如果您的逻辑只运行一次，那么您可以在

创建的

或

装载的

生命周期挂钩中调用它，并将输出存储在DOM中打印的字符串中。从这个意义上讲，您正在确保存在一个单向数据流

下面的示例说明了可能的修复方法。无法确定

选项的来源，因此您可能需要进行一些调整：

<template>
  ..... {{ countOutput }} ......
</template>

<script lang="ts">
export default Vue.extend({
  data () {
    return {
      count: 1,
      countOutput: '',
      str: ''
    }
  },
  mounted(): {
    this.countOutput = this.countf(this.options[1], this.options[2], this.options[3], this.options[4], this.options[5]);
  },
  methods: {
    countf(a: any, b: any, c: any, d: any, e: any) {

      this.str = a.title;

     if (this.str.indexOf("Lapel") > -1) {
       this.count++;
     }

     return "Count = " + this.count;
    }
  }
})
</script>


..... {{countOutput}}。。。。。。
导出默认Vue.extend({
数据（）{
返回{
计数：1，
计数输出：“”，
str:'
}
},
已装入（）：{
this.countOutput=this.countf（this.options[1]、this.options[2]、this.options[3]、this.options[4]、this.options[5]）；
},
方法：{
countf（a:any，b:any，c:any，d:any，e:any）{
this.str=a.title；
如果（这是一个“翻领”）>-1）{
这个.count++；
}
return“Count=”+this.Count；
}
}
})
这是因为您正在输入一个递归：每次重新绘制DOM时，都会调用
countf（）
函数，从而执行
this.count++
。这会更改DOM并强制重新绘制，等等。那么我如何解决这个问题呢？在名为
countString
的
data
对象中创建一个新变量，并将
countf
逻辑放入Vue
beforMount
生命周期方法中，然后更新
countString
值