0
132
ViewsDisplay numbers as subscript in selected items from v-select slot in vue js
I use v-select in Vue project to select from Chemicals and oxides list,
I want to display selected items with Subscript for numbers only like attached figure :
My code is :
<v-select v-model="elements" class="form-control text-left" :items="chemicals"></v-select>
chemicals :
["Ag","Al2O3","Al2O3/(CaO+MgO+K2O+Na2O)","As","Au","Ba","BaO","Be","Bi","Br","Ca","CaO","Cd","Ce","Cl","Cl","Co","CO2","Cr","Cr2O3","Cs","Cu","Dy","SO3","SO4","Sr","SrO","Ta","Tb","Th","Ti","TiO2","Tl",]
·
Juan Pablo Isaza
1 answers
Answer question0
You could replace all the digits as individual subscript characters:
Create an array (e.g., named
subscripts) of subscript Unicode characters (\u2080for0, throughu2089for9). This enables mapping a given digit to a subscript character by using the digit as an index into the subscript array (i.e.,subscripts[3] = '\u2083').Use
String.prototype.replace()with a replacer function that converts any digit to the subscript.
const subscripts = [
'\u2080',
'\u2081',
'\u2082',
'\u2083',
'\u2084',
'\u2085',
'\u2086',
'\u2087',
'\u2088',
'\u2089',
]
const ELEMENTS = ["Ag","Al2O3","Al2O3/(CaO+MgO+K2O+Na2O)","As","Au","Ba","BaO","Be","Bi","Br","Ca","CaO","Cd","Ce","Cl","Cl","Co","CO2","Cr","Cr2O3","Cs","Cu","Dy","SO3","SO4","Sr","SrO","Ta","Tb","Th","Ti","TiO2","Tl"]
const elements = ELEMENTS.map(name => {
return name.replace(/\d/g, (num) => subscripts[Number(num)])
})
·
Juan Pablo Isaza
Report
Answer question