Using <component> :is in Vue <script setup>

Question

I want a button to toggle between two views on click. The code is:

<template>
  <button @click="switchSheet">{{ currentSheet }}</button>
  <component :is="sheetView" :key="componentKey" />
</template>

<script setup>
import DisplaySheetClassrooms from "./components/ds-classrooms.vue";
import DisplaySheetChromebooks from "./components/ds-chromebooks.vue";

let sheetView = DisplaySheetClassrooms;
let currentSheet = ref("HS Classrooms");

const switchSheet = () => {
  if (sheetView == DisplaySheetClassrooms) {
    sheetView = DisplaySheetChromebooks;
    currentSheet.value = "HS Chromebooks";
  } else {
    sheetView = DisplaySheetClassrooms;
    currentSheet.value = "HS Classrooms";
  }
};

Documentation states

":is can contain either:

the name string of a registered component, OR
the actual imported component object"

I am using the actual imported component but looking at Devtools switchView never changes value on click. I also tried it with string quotes and still no good. I tried solution here but it did not work for me. Could somebody clarify how to get this working . Thanks in advance.

const sheetView = ref('DisplaySheetClassrooms'); const currentSheet = ref('HS Classrooms'); function switchSheet() { sheetView.value === 'DisplaySheetClassrooms' ? sheetView.value = 'DisplaySheetChromebooks' : sheetView.value = 'DisplaySheetClassrooms'; sheetView.value === 'DisplaySheetClassrooms' ? currentSheet.value = 'HS Classrooms' : currentSheet.value = 'HS Chromebooks'; } — Михаил
– Михаил, Commented Feb 11, 2022 at 17:59

Daniel · Accepted Answer · 2022-02-11 17:22:53Z

1

This seems to work for me:

Use a components object and have the component name key (sheetView in your case) used to target the key in the component :is value

example:

<template>
  <button @click="switchSheet">{{ currentSheet }}</button>
  <component :is="components[currentSheet]" :key="currentSheet" />
</template>

<script setup>
import DisplaySheetClassrooms from "./components/ds-classrooms.vue";
import DisplaySheetChromebooks from "./components/ds-chromebooks.vue";

let currentSheet = ref("DisplaySheetChromebooks");

// create an object key (doesn't need to be a ref)
const components = {
  DisplaySheetChromebooks,
  DisplaySheetClassrooms,
}

const switchSheet = () => {
  if (currentSheet === "DisplaySheetClassrooms) {
    currentSheet = "DisplaySheetChromebooks";
  } else {
    currentSheet = "DisplaySheetClassrooms";
  }
};
</script>

answered Feb 11, 2022 at 17:22

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alan Over a year ago

Thanks. Just had to add .value to all currentSheet occurences. Gotta tell you I'm getting a little sick of composition API. Things that took 15mins take an hour now. Steeper learning curve then I first thought. There's always a little gotcha. Are you finding it the same?

Daniel Over a year ago

I'm not keen on the <script setup>, but I do like the composition API. That said, I do most of the stuff in svelte these days anyway. I get the impression that <script setup> is there to match the svelte experience, but it does seem a little incomplete. There certain things that just don't work there, such as typing props with typescript if I remember correctly.

Alan Over a year ago

I just feel where always chasing the next big thing when you go down framework rabbit hole. I'm going to be making a concerted effort to do as much as possible with plain vanilla JS in future.

Collectives™ on Stack Overflow

Using <component> :is in Vue <script setup>

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related