add titles to v-model / v-bind in select box

We have a dropdown where users can pick a html tag for the font like h1, h2... p, and so on. We would like each html tag to stay intact and load in source code but to explain what the choices mean we would like to show

h1 - site header
h2 - page header
h3 - article header
h4 sub header
h5 sub sub header
p - body text

with current code

...
<xxx-select-input v-if="!standardPresetMode" title="tag" v-model="preset.tag" :options="['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'p']" />
...

we can choose h1 and see that in dropdown and it gets added to source code. And options is separate component with this as template

// resources/js/components/editor/sidebar/inputs/SelectInput.vue
...
<div class="input-group smt-control">
  <select v-model="iValue" class="form-control" :disabled="disabled">
    <template v-if="options.length && options[0] instanceof Object">
      <option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.text }}</option>
    </template>
    <template v-else>
      <option v-for="(option, index) in options" :value="option" :key="index">{{ option }}</option>
    </template>
  </select>
  <span class="input-group-addon" @click="deselectModule"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
...

How would we make it h1 - site header and only add h1 to source code ?

Probably need a new set description besides the value option(s) and also only load when available. But how to implement it I am still not sure about.

using

...
<smt-select-input 
  v-if="!standardPresetMode" 
  title="tag" 
  v-model="preset.tag" 
  :options="['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'p']" 
  :descriptions="['site header','page header', 'article header', ' sub header','sub sub header', 'paragraph']" 
/>

to load descriptions with select box component update:

...
<select v-model="iValue" class="form-control" :disabled="disabled">
  <template v-if="options.length && options[0] instanceof Object">
    <option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.text }}{{ description.text }}</option>
  </template>
  <template v-else>
    <option v-for="(option, index) in options" :value="option" :key="index">{{ option }}{{ description }}</option>
  </template>
</select>
...

Just gets me

Vue warn]: Property or method "description" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <XxxSelectInput> at resources/js/components/editor/sidebar/inputs/SelectInput.vue
       <XxxGenerateInputsModal> at resources/js/components/editor/modals/GenerateInputsModal.vue
         <Root>

Ben Taylor

3 years ago

Best Answer

Level 35

You could change your options array to something like this:

options="[{value: 'h1', text:. 'h1 - site header'}, ...you fill out the rest of the objects]"

1 like

rhand

3 years ago

Level 6

@ben taylor Thanks man! Never knew I could do that like this. Much easier than I thought! Testing now, but I think this is really working using

...
:options="[
    {value: 'span', text: 'span - base tag'}, 
    {value: 'h1', text: 'h1 - site header'}, 
    {value: 'h2', text: 'h2 - page header',},
    {value: 'h3', text: 'h3 - article header'},
    {value: 'h4', text: 'h4 - sub header'},
    {value: 'h5', text: 'h5 - sub sub header'},
    {value: 'p', text: 'p - paragraph'}
]"
...

1 like

Please or to participate in this conversation.