How to add multiple attribute - vue.js

Question

This works:

<input v-model="project.name" :readonly="isReadOnly" :disabled="isReadOnly">

Is there a way to make below code work?

<input v-model="project.name" {{ readOnlyAttr }} >
<input v-model="project.name" {{ isReadOnly : 'readonly disabled' ? ''}}>

Script as follows:

<script>
  export default {
    props: {
      isReadOnly: {
        default: ture,
        type: Boolean
      }
    },
    data () {
      return {
        readOnlyAttr: 'readonly disabled'
      }
    }
  }
</script>

Answer 1

v-bind is your friend here. Because you want the attributes to be computed, I created a computed method to build the object everytime there is a change to isReadOnly value.

When you want to bind statically group of attributes, you can use the data method.

<template>
  <div>
    <input v-model="project.name" v-bind="readOnlyAttributes">
  </div>
</template>
<script>

export default {
  name: 'example',
  computed: {
    readOnlyAttributes() {
      return {
        readonly: this.isReadOnly,
        disabled: this.isReadOnly ? 'readonly' : ''
      }
    },
    isReadOnly() {
      // returning always true for the example
      return true;
    }
  }
}