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>