How can i use constants in vuejs template?-CodePudding

how can i use constants in the template of the vuejs?

this is my code, I'm declaring this constants import TIPS from '../../constants/tipsConstants' and i want to use in the template like this onWhiteListedMint(TIPS.TIP_A)

<template>
  <el-row class="row" justify="center">
    {{ACTION_CARD.ACTION_A}}
    <CustomCard
      @onClick="isListed(TIPS.TIP_A)"
    />

import TIPS from '../../constants/tipsConstants'
  
  export default {
    name: 'Main',
    props: {

the content of tipsConstants is:

export const TIPS = { TIP_A: 'TIP_A', TIP_B: 'TIP_B', TIP_C: 'TIP_C'}

i am getting this error

35:10  error    'TIPS' is defined but never used

CodePudding user response：

tipsConstants.js has a named export for TIPS, so the component would have to use a named import:

import { TIPS } from '../../constants/tipsConstants'

You could expose TIPS to the template through a data property. Since you likely don't need reactivity on it, use Object.freeze() on the imported object as shown below:

import { TIPS } from '../../constants/tipsConstants'

export default {
  data() {
    return {
      TIPS: Object.freeze(TIPS),
    }
  }
}

demo