Are custom attribute bindings possible with Vue templates?

Question

I'm trying to bind a custom attribute value in my Vue template. How can I do this?

(EDIT: The following code actually binds correctly. A third party library (Foundation) was interfering with the binding. Leaving the question up as it may be useful to others.

<template>
    <span v-bind="{ 'aria-controls': inputControlId }"></span>
    <input v-bind="{ 'id': inputControlId }">
</template>

<script lang="ts">

    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component
    export default class Slider extends Vue {
       inputControlId = "TheBourneId";
    }
}
</script>

Answer 1

The common syntax for binding attributes is

<template>
    <span v-bind:aria-controls="inputControlId"></span>
    <input v-bind:id="inputControlId">
</template>

There is also a shorthand.

<template>
    <span :aria-controls="inputControlId"></span>
    <input :id="inputControlId">
</template>

You can bind multiple properties at once using the syntax in your question, it's just not commonly used outside class or style, especially for single attributes.

It sounds like the real issue was your CSS framework.