Javascript 当我在Vue.js中使用作用域css时；这"；在模板中变为未定义

当我在scoped中设置vue组件的css样式时，我不再能够在模板中访问“this”，而是在脚本中访问“yes”。 我收到以下错误消息： “未捕获（承诺中）TypeError:无法读取未定义的属性“$store” 我需要它，因为我正在使用商店见示例代码。 提前感谢您的帮助

export default ({
    name: "ModelSelect",
    computed: {
      modelList: {
        get () {
          return this.$store.state.identification.modelList
        }
      },
      model: {
        get () {
          return this.$store.state.identification.model.id
        },
        set (value) {
          this.$store.dispatch('identification/updateModel', value)
        }
      },
    },
    updated() {
      this.$emit('scrollToNext')
    }
})
</script>

<template>
  <div class="form-select-section mb-5 border p-4" v-if="modelList.length > 0 && this.$store.state.identification.brand.id">
    <span class="text-gray-700 mb-3 block">Choix du modèle</span>
    <ul class="select-group grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 xl:grid-cols-8 gap-4">
      <li class="select-item" v-for="modelItem in modelList" :key="modelItem.attributes.name+modelItem.id">
        <input type="radio" name="model" :value="modelItem.id" v-model="model" :id="modelItem.attributes.name+modelItem.id" class="hidden">
        <label :for="modelItem.attributes.name+modelItem.id" class="flex flex-col items-center justify-center text-center">
          <span class="mt-1">{{modelItem.attributes.name}}</span>
        </label>
      </li>
    </ul>
  </div>
</template>

<style scoped>
  .select-item {
    color: red;
  }
</style>

导出默认值({
名称：“ModelSelect”，
计算：{
模型列表：{
得到（）{
返回此。$store.state.identification.modelList
}
},
型号：{
得到（）{
返回此。$store.state.identification.model.id
},
设置（值）{
此.$store.dispatch（'identification/updateModel'，value）
}
},
},
更新的（）{
此.$emit（'scrollToNext'）
}
})
莫代尔教堂


{{modelItem.attributes.name}


.选择项目{
颜色：红色；
}

无论如何，您不应该在模板中使用

此

。只要使用

v-if=“modelList.length>0&&$store.state.identification.brand.id”

它确实有效，我觉得它似乎已经测试过了。非常感谢你，菲尔，很抱歉这个愚蠢的问题。对我来说，这是一个很常见的错误，有一个固定的回答，所以不，一点也不愚蠢