vue.js - vuejs - ¿Son posibles los enlaces de atributos personalizados con plantillas Vue?

vue.js wikipedia

Question

Estoy intentando vincular un valor de atributo personalizado en mi plantilla de Vue. ¿Cómo puedo hacer esto?

(EDITAR: El siguiente código realmente se une correctamente. Una biblioteca de terceros (Foundation) estaba interfiriendo con el enlace. Dejando la pregunta como puede ser útil para otros.

<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

La sintaxis común para los atributos de enlace es

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

También hay una taquigrafía .

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

Puede enlazar múltiples propiedades a la vez usando la sintaxis de su pregunta, simplemente no se usa comúnmente fuera de class o style , especialmente para atributos individuales.

Parece que el verdadero problema fue su marco CSS.