<h2>{{ store.state.info }}</h2>报错
时间: 2023-09-17 13:00:43 浏览: 48
报错的原因是在Vue模板中使用了双花括号{{}}来插入store中的数据,但是在模板编译时,双花括号中的内容被解析为JavaScript表达式。这样会导致模板解析器无法正确识别store.state.info并报错。
解决这个问题有两种方法:
1. 使用v-text指令替代双花括号,将store.state.info的值直接显示在h2标签中。修改代码如下:
<h2 v-text="store.state.info"></h2>
这样,模板解析器会正确识别store.state.info并将其值显示在h2标签中。
2. 在Vue组件的<template>标签外部,使用计算属性或者方法来获取store.state.info的值,并将其传递给<h2>标签。修改代码如下:
<template>
<h2>{{ getInfo() }}</h2>
</template>
<script>
export default {
computed: {
// 计算属性,用于获取store.state.info的值
getInfo() {
return this.$store.state.info;
}
}
}
</script>
这样,通过计算属性getInfo()获取store.state.info的值,并将其显示在h2标签中。
无论采用哪种方法,都能正确显示store.state.info的值,避免报错。