vuejs3 dynamic attribute with no value

Question

How can I set up a dynamic attribute within vuejs3. Vanilla js is a lot easier, but within Vue this is apparently not obvious.

I want to be able to use a variable as an attribute.

Something like this:

  <q-input
     outlined <---(This must be variable "item.design" without any value)
     v-model="data.value"
     maxlength="12"
     class="super-small subshadow-25"
   />

I've read some examples and documentation but the examples are mainly for vuejs2.

Do I miss something?

Answer 1

You can bind data vars to attributes just as easily using v-bind: on the attribute (or the shorthand :):

<q-input
  :outlined="outlined"
  :filled="filled"
  v-model="data.value"
  maxlength="12"
  class="super-small subshadow-25"
/>

// script (options api)
data() {
  return {
    item: {
      design: 'filled',
    },
    data: {
      value: null,
    },
  };
},

computed: {
  filled() {
    return this.item.design === 'filled';
  },
  outlined() {
    return this.item.design === 'outlined';
  },
}