Vue Knob / Guides / Labels

The values and labels for the vue-component can be set using the options array prop.

#Simple Array

The simplest way is to pass an array of values which will be used for both the value and label.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
    />
</template

<script>
    export default {
        data() {
            return {
                knob: {
                    value: 1,
                    options: [1, 2, 3, 4, 5]
                }
            }
        }
    }
</script>

#Object Array

An object can also be set if the value and label need to be different.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
    />
</template

<script>
    export default {
        data() {
            return {
                knob: {
                    value: 1,
                    options: [{
                        value: 1,
                        label: 'one'
                    }, {
                        value: 2,
                        label: 'two'
                    }, {
                        value: 3,
                        label: 'three'
                    }, {
                        value: 4,
                        label: 'four'
                    }, {
                        value: 5,
                        label: 'five'
                    }]
                }
            }
        }
    }
</script>

#Value / Label Key

If a different key is needed for the value or label they can be set using the value-key and label-key props.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
        value-key="val"
        label-key="lbl"
    />
</template

<script>
    export default {
        data() {
            return {
                knob: {
                    value: 1,
                    options: [{
                        val: 1,
                        lbl: 'one'
                    }, {
                        val: 2,
                        lbl: 'two'
                    }, {
                        val: 3,
                        lbl: 'three'
                    }, {
                        val: 4,
                        lbl: 'four'
                    }, {
                        val: 5,
                        lbl: 'five'
                    }]
                }
            }
        }
    }
</script>

#HTML Labels

It's also possible to insert HTML directly into the label parameter.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
    />
</template

<script>
    export default {
        data() {
            return {
                knob: {
                    value: 1,
                    options: [{
                        value: 1,
                        label: 'one'
                    }, {
                        value: 2,
                        label: '<b>two</b>'
                    }, {
                        value: 3,
                        label: '<span class="blah">three</span>'
                    }, {
                        value: 4,
                        label: '<span class="fa fa-fw fa-circle"></span>'
                    },{
                        value: 5,
                        label: '<img src="/path/to/img.png" />'
                    }]
                }
            }
        }
    }
</script>