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"
     
   />

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

Do I miss something?

CodePudding user response：

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

<q-input
  :outlined="my_var"
  v-model="data.value"
  maxlength="12"
  
/>

// script
data() {
  return {
    my_var: false,
    value: 'asdf',
  };
}

CodePudding user response：

Take a look at following snippet you can pass true/false to binded attributes:

const { ref, computed } = Vue
const app = Vue.createApp({
  setup () {
    const data = ref({value: null})
    const item = ref({design: 'filled'})
    const design = (type) => {
      return item.value.design === 'filled' ? 'outlined' : 'filled' 
    }
    return { data, item, design }
  }
})

app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <div >
    <q-btn color="white" text-color="black" label="toogle design" @click="item.design = item.design === 'filled' ? 'outlined' : 'filled'" >
    </q-btn>
    <q-input
       :filled="design(item.design)"
       :outlined="design(item.design)"
       v-model="data.value"
       maxlength="12"
       
     />
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>