Computer scienceFrontendVue.jsVue 3 SyntaxVue Directives

v-bind

Add template

Report a typo

Look at the code below. You need to write a button, with the disabled attribute depending on the isDisabled state variable. The Onclick event must trigger the disable function. The text inside the button must be taken from the text variable.

<script setup>
import { ref } from 'vue';

const text = ref("I'am active!");
const isDisabled = ref(false);

const disable = () => {
  isDisabled.value = !isDisabled.value
  text.value = "I'm dissabled :("
}

</script>

<template>
 // code here
</template>

Which of the options below is correct and can be added inside the template?

Select one option from the list

<button v-bind:disabled="isDisabled()" @:click="disable">{{ text }}</button>

<button v-bind:disabled="isDisabled" @:click="disable">{ text }</button>

<button @bind:disabled="isDisabled" @:click="disable">{{ text }}</button>

<button v-bind:disabled="isDisabled" @:click="disable">{{ text }}</button>

___

Create a free account to access the full topic