Classes not showing on vue component

Hello, On laracasts there is a new version of "Build a Forum with Laravel". Episode 15 The Comment Form. Using: Laravel, Jetstream, Vue3, Inertia, Mysql. There is a vue component TextInput and it has some classes in it the classes show up fine in the browser. We copy over the code from the TextInput.vue component into a new component TextArea.vue and change the classes and the classes do not render in the browser on the new component?

TextInput.vue (original component and. the classes render)

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

defineProps({
    modelValue: String,
});

defineEmits(['update:modelValue']);

const input = ref(null);

onMounted(() => {
    if (input.value.hasAttribute('autofocus')) {
        input.value.focus();
    }
});

defineExpose({ focus: () => input.value.focus() });
</script>

<template>
    <input
        ref="input"
        class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
    >
</template>

The above classes work fine in the browser.

TextArea.vue (the new component and the classes do not render) the classes do not show up at all not even if I inspect the component in the browser they are not there.

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

defineProps({
    modelValue: String,
});

defineEmits(['update:modelValue']);

const input = ref(null);

onMounted(() => {
    if (input.value.hasAttribute('autofocus')) {
        input.value.focus();
    }
});

defineExpose({ focus: () => input.value.focus() });
</script>

<template>
    <textarea
        ref="input"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
    ></textarea>
</template>

The classes will work in TextInput.vue but not in TextArea.vue. The classes will work however if I add them onto the instance of TextArea like below.

This is in the Show.vue

<TextArea
    rows="4"
    id="body"
    v-model="commentForm.body"
    placeholder="What do you think?"
    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>

LaryAI

2 years ago

Best Answer

Level 58

It seems like you're encountering an issue where the classes defined within your TextArea.vue component are not being applied when the component is rendered. This could be due to a few reasons, but let's go through a checklist to troubleshoot the problem:

Check for Typos: Ensure that there are no typos in your class names or syntax errors in your TextArea.vue component.
Scoped Styles: If you are using scoped styles (<style scoped>) in your TextArea.vue component, the styles will not be applied to child components. Make sure that the styles are not scoped or that you are importing a global stylesheet.
CSS Pre-Processor Issues: If you are using a CSS pre-processor like SASS/SCSS or LESS, ensure that the styles are being compiled correctly.
Vue Component Caching: Sometimes, Vue components can be cached by the build system or the browser. Try to clear the cache or use a hard refresh in your browser to see if the changes are reflected.
Check for Overriding Styles: It's possible that other styles are overriding your classes. Use the browser's developer tools to inspect the element and see if any styles are being overridden.
Vue Component Import: Ensure that you are importing and registering the TextArea.vue component correctly in the parent component where it's being used.
Vue Version Compatibility: Since you're using Vue 3, make sure that all your syntax is compatible with Vue 3, including the Composition API usage.

If after going through this checklist the issue still persists, here's a basic example of how a TextArea.vue component should be structured:

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

const props = defineProps({
    modelValue: String,
});

const emit = defineEmits(['update:modelValue']);

const textarea = ref(null);

// Rest of your setup logic
</script>

<template>
    <textarea
        ref="textarea"
        :value="props.modelValue"
        @input="emit('update:modelValue', $event.target.value)"
        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
    ></textarea>
</template>

Make sure to replace the input ref with textarea to match the element type. If the issue still isn't resolved, please provide more context or any error messages you might be seeing, and we can further troubleshoot the problem.

gych

2 years ago

Level 29

Are both components located in the same folder?

lemmon

2 years ago

Level 28

@gych yes

lemmon

2 years ago

Level 28

I hate AI, Larry nailed it with: Vue Component Import: Ensure that you are importing and registering the TextArea.vue component correctly in the parent component where it's being used.

Please or to participate in this conversation.