Tips for controlling or concealing slot elements within child components in Vue Js

Question

Tips for controlling or concealing slot elements within child components in Vue Js

I'm working with a named slot:

<div
      name="checkAnswer"
      class="w-[70%] mx-[15%] flex items-center justify-center"
    >
      <button
        class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 border-grey-800 hover:border-black hover:transition-all hover:duration-500"
      >
        <slot name="checkAnswer"></slot>
      </button>
    </div>

Here's how I use the named slot in my component:

 <template #checkAnswer>
        <button
          @click="checkAnswer"
          :disabled="isAnswerChecked"
          :class="{
            ' text-gray-300 border-gray-300  ': isAnswerChecked,
          }"
        >
          Check answer
        </button>
      </template>

I need to use the button tag for @click functionality, as it can't be applied directly to the template element.

However, I'm facing an issue. When the "Check answer" button is clicked, correct answers are displayed but I want to hide the button afterwards. The problem is that I can't seem to figure out how to hide the entire button - using v-show on the template element only hides the text within the button, leaving me with an empty button.

I've tried placing div elements inside and outside the template, but so far I haven't found a way to hide the button completely, not just its text.

javascript vue.js vuejs3

Answer 1

Answer №1

Vue Component Playground

To achieve passing component attributes to a specific non-root element, it is necessary to disable automatic attribute inheritance to the root component by using inheritAttrs: false and manually assign the attributes to the desired element using the $attrs variable in the template;

For more information on disabling attribute inheritance in Vue, refer to the following link in the Vue documentation: https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance

The use of slots is not required in this scenario unless you are passing a custom button label. Attempting to insert a button into another button in hopes of merging them into one will not result in the expected behavior.

The structure of your Answer.vue component:

<script>
    export default {
        inheritAttrs: false
    };
</script>

<template>
<div
      name="checkAnswer"
      class="w-[70%] mx-[15%] flex items-center justify-center"
    >
      <button
        v-bind="$attrs"
        class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 border-grey-800 hover:border-black hover:transition-all hover:duration-500"
      >
      <slot name="checkAnswer">Check answer</slot>
      </button>
    </div>
</template>

App.vue content:

<script setup>

  import {ref} from 'vue';
    import Answer from './Answer.vue';

  const isAnswerChecked = ref(false);

</script>

<template>
  <answer 
    @click="isAnswerChecked = true" 
    :disabled="isAnswerChecked"
          :class="{
            ' text-gray-300 border-gray-300  ': isAnswerChecked,
          }">
    <template #checkAnswer>
      Check answer carefully
    </template>
  </answer>
</template>

Answer 2

Vue Component Playground

To achieve passing component attributes to a specific non-root element, it is necessary to disable automatic attribute inheritance to the root component by using inheritAttrs: false and manually assign the attributes to the desired element using the $attrs variable in the template;

For more information on disabling attribute inheritance in Vue, refer to the following link in the Vue documentation: https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance

The use of slots is not required in this scenario unless you are passing a custom button label. Attempting to insert a button into another button in hopes of merging them into one will not result in the expected behavior.

The structure of your Answer.vue component:

<script>
    export default {
        inheritAttrs: false
    };
</script>

<template>
<div
      name="checkAnswer"
      class="w-[70%] mx-[15%] flex items-center justify-center"
    >
      <button
        v-bind="$attrs"
        class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 border-grey-800 hover:border-black hover:transition-all hover:duration-500"
      >
      <slot name="checkAnswer">Check answer</slot>
      </button>
    </div>
</template>

App.vue content:

<script setup>

  import {ref} from 'vue';
    import Answer from './Answer.vue';

  const isAnswerChecked = ref(false);

</script>

<template>
  <answer 
    @click="isAnswerChecked = true" 
    :disabled="isAnswerChecked"
          :class="{
            ' text-gray-300 border-gray-300  ': isAnswerChecked,
          }">
    <template #checkAnswer>
      Check answer carefully
    </template>
  </answer>
</template>

Tips for controlling or concealing slot elements within child components in Vue Js

Answer №1

Similar questions

Troubleshooting the non-functioning addEventListener in JavaScript

Execute the function when the form is submitted and show the total of the two values

Dynamic Font Formatting in Rails Table Based on Conditions

Transforming the data retrieved from the API into a well-organized object in Vue.js

How can I transfer the total and counter values to a different PHP page and store them in a text box before saving them to the database?

When using Selenium WebDriver in Java, we noticed that despite initially failing with JavascriptExecutor, the element click method with WebElement performed successfully

The environmental variables stored in the .env file are showing up as undefined in Next.js 13

Ways to retrieve Payload following the Request url access

Getting data from an API with authorization in Next.js using axios - a step-by-step guide

FullCalendar is encountering loading issues when trying to fetch data from JSON, with the

Assign the value of "td" to the variable "val"

In Typescript, we can streamline this code by assigning a default value of `true` to `this.active` if `data.active

Blank page shown when routing with Angular in Rails

JavaScript Delayed Redirection

Error with JavaScript callback functions

Step by step guide on loading a dynamic Vue.js component from a different component

Toggling the form's value to true upon displaying the popup

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

Create a datastring using a JSON object

Why isn't the Nunjucks extends directive functioning when the template is stored in a different directory and being used