Are custom attribute bindings possible with Vue templates?
I am trying to bind a custom attribute value in my Vue template. How can i do this?
(EDIT: The following code is actually linking correctly. A third party library (Foundation) tampered with the linking. Leaving the question as to how it might 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>
+3
source to share
1 answer
General attribute syntax
<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 just isn't usually used outside class
or style
especially for individual attributes.
It looks like the real problem was in your CSS structure.
+2
source to share