Vue.js Vue JS使用局部变量而不在data（）函数中定义

我是Vue JS的初学者。我必须在其值经常变化的组件中使用一个变量。 因此，当我在data（）下声明并定义它时，Chrome控制台中会出现以下警告

因为当data（）变量发生变化时，Vue框架会自动调用render函数

除了在data（）方法中声明变量外，还有其他方法可以声明和使用它吗

<template>
    <ul>
         <div v-for="(list,index) in itemlist" :key="index">
           <div v-if="!isFirstCharSame(list.label)" >{{ firstChar }} </div>
            <li>
              <span>{{ list.label }}</span>
            </li> 
         </div>  
       </ul> 
</template>
<script>
export default {
    data() {
      return {
        itemlist: [
                  {"label":"Alpha"},
                  {"label":"Beta"},
                  {"label":"Charlie"},
                  {"label":"Delta"}],
        firstChar:"$"
      }
    },
    methods : {
      isFirstCharSame: function(str) {
      if(str.startsWith(this.firstChar)) {
        return true;
      }
      this.firstChar = str.charAt(0);
      return false;
    }
    }

}
</script>

{{firstChar}}

{{list.label}


导出默认值{
数据（）{
返回{
项目列表：[
{“label”：“Alpha”}，
{“标签”：“Beta”}，
{“标签”：“查理”}，
{“label”：“Delta”}]，
firstChar:“$”
}
},
方法：{
isFirstCharSame:函数（str）{
if（str.startsWith（this.firstChar））{
返回true；
}
this.firstChar=str.charAt（0）；
返回false；
}
}
}

预期的输出应该是这样的

---

在A组中，它应该显示以A开头的所有元素。您可以在方法或计算属性等中声明组件中的变量，但它们无法从模板或代码的其余部分访问，也不会是被动的

要使它们具有反应性并可从更高范围访问，唯一的方法是通过以下方式向组件添加

数据

属性：

数据：函数（）{
返回{
福：“酒吧”
}
},

或

数据（）{
返回{
福：“酒吧”
}
},

除此之外，错误的原因是在渲染中改变变量的状态。发生这种情况时，Vue会重新呈现模板，因为值发生了变化，并再次调用函数，瞧，这里有一个无限循环

---

您可能应该检查正在调用的函数，并尝试用从实际

数据

变量中获取数据的局部变量替换

数据

属性中不断变化的变量。

我已更新了答案以反映更新的信息：）

下面我们将使用计算属性进行渲染，以确保其按字母顺序排序，然后渲染第一个字符。虽然您应该使用分组imo

<template>
    <ul>
        <div v-for="(list, index) in sortedlist" :key="`people_${index}`">
           <div v-if="!isFirstCharSame(list.label)" >{{ firstChar }} </div>
            <li>
              <span>{{ list.label }}</span>
            </li> 
         </div> 
    </ul> 
</template>
<script>
export default {
    data() {
      return {
        itemlist: [
            {"label":"Alpha"},
            {"label":"Beta"},
            {"label":"Charlie"},
            {"label":"Delta"},
        ],
        firstChar: '',
      };
    },
    methods: {
        isFirstCharSame(char) {
            if (str.startsWith(this.firstChar)) {
                return true;
            }
            this.firstChar = str.charAt(0);
            return false;
        },
    },
    computed: {
        sortedList() {
            return this.itemList.sort((a, b) => {
                if (a.label > b.label) {
                    return 1;
                }
                if (b.label > a.label) {
                    return -1;
                }
                return 0;
            });
        },
    },
};
</script>

{{firstChar}}

{{list.label}


导出默认值{
数据（）{
返回{
项目列表：[
{“label”：“Alpha”}，
{“标签”：“Beta”}，
{“标签”：“查理”}，
{“label”：“Delta”}，
],
firstChar:“”，
};
},
方法：{
isFirstCharSame（字符）{
if（str.startsWith（this.firstChar））{
返回true；
}
this.firstChar=str.charAt（0）；
返回false；
},
},
计算：{
分类列表（）{
返回此.itemList.sort（（a，b）=>{
如果（a.标签>b.标签）{
返回1；
}
如果（b.标签>a.标签）{
返回-1；
}
返回0；
});
},
},
};

---

是的，您可以随时更新数据，组件将重新渲染以反映数据。

在数据中声明数据可能不是问题的根本原因。您必须向我们显示代码以提供帮助。@StevenB。我已附上代码。在这里，当我在itemlist中循环时，我正在更改firstChar变量名。您试图对上述模板做什么？按字母顺序排列列表？@MichaelMano Yes连同第一个字符一起作为单独的div，这样看起来就像Grouping，因为我需要按所示对其进行分组，所以我必须永久存储最后一个条目。我需要显示整个组的第一个字符，然后我需要显示元素名称。但我找不到任何其他的逻辑。