How can i use constants in vuejs template?

Question

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

tony19 · Accepted Answer · 2021-11-24 03:51:45Z

2

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

edited Nov 24, 2021 at 3:51

answered Nov 24, 2021 at 3:31

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony19 Over a year ago

You technically can expose TIPS directly without Object.freeze(), but then the object will be made reactive (i.e., Vue will track changes to the object) unecessarily because the object is not going to change (they're all constants). A data property is reactive by default, but you have the option of making it not-reactive with Object.freeze().

Collectives™ on Stack Overflow

How can i use constants in vuejs template?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related