Question

几天后，我尝试根据情况调整响应值。

我需要这个，当值为null或为空时，应用条件。

<li v-if="item[0].otrodl4.trim() == ''" class="progress-step">

但是我得到了错误

vue.js：597 [Vue警告]：渲染错误：“ TypeError：无法读取null的属性'trim'”

问题是某些值仅带空格，而没有更多，应将其视为null或空。

E.G。

我尝试使用过滤器，但出现了相同的错误。

感谢阅读。

问候。

Answer 1

尝试一下：

!item || !item[0] || !item[0].otrodl4 || item[0].otrodl4.trim() == ''

基本上，您必须检查是否定义了item而不是null。并且该数组的第一个元素存在，并且该元素具有otrodl4属性。

Answer 2

尝试一下：

item[0] && item[0].otrodl4.trim() == ''

因此，它唯一一次检查item[0].otrodl4.trim() == ''是否为项目数组的0索引位置中是否有值。

它被称为short-circuit条件，您可以阅读有关它的所有内容here。

Answer 3

我已经尝试过trim（），并且工作正常。请尝试这是否对您有帮助。

handleUserSearch = (value) => {
    const myValue = value; // value is the search criteria string
    //do  stuff here
  }

Answer 4

这是一个TypeError，您尝试操纵的变量与开发人员认为不是。

在没有正确键入的情况下，总是会遇到一种语言。

因此，您可以进行可选的链接，并检查变量是否应该是第一个变量。

ES2020允许我们使用可选的链接进行类型检查。

例如，

v-if="!!item?.[0]?.otrodl4?.trim && item?.[0]?.otrodl4?.trim() == ''"

！是类型转换为伪造的值，例如null或undefined或空字符串变为false。

确保otrodl4在调用方法之前具有属性方法trim，因此不会再导致TypeError。