Choosing between various instances of the same Vue component: a guide to dynamic components

Currently, I am facing an issue with utilizing iView as the UI library for our project. Specifically, I need to select a Button from multiple iView Button components within a dynamic component, but I am unsure what should be passed to the :is props of the component. Below is a snippet of my code:

  <span class="top-buttons" v-if="showTopButtons">
    <Button @click="selectAll">
      <Icon type="android-remove-circle"></Icon>
      Select All
    </Button>
    <component :is="???">
      <Button @click="moveToDrafts">
        <Icon type="android-cancel"></Icon>
        Move to Drafts
      </Button>
      <Button @click="publish">
        <Icon type="android-cancel"></Icon>
        Publish
      </Button>
      <Button @click="publish">
        <Icon type="android-cancel"></Icon>
        Publish
      </Button>
    </component>
    <Button @click="deleteTour">
      <Icon type="trash-a"></Icon>
      Delete
    </Button>
  </span>
javascriptvue.jscomponentsvue-componentiview

Answer №1

:is prop should be passed a component

For example:

<template>
    <component v-bind:is="currentTabComponent"></component>
</template>

<script>
import currentTabComponent from './currentTabComponent';
export default {
  components: {
    currentTabComponent,
  },
};
</script>

In your situation, it may be more appropriate to use v-if instead

<Button @click="moveToDrafts" v-if="someCondition1">
    <Icon type="android-cancel"></Icon>
    Move to Drafts
</Button>
<Button @click="publish" v-else-if="someCondition2">
    <Icon type="android-cancel"></Icon>
    Publish
</Button>
<Button @click="publish" v-else>
    <Icon type="android-cancel"></Icon>
    Publish
</Button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to use ajax to display the combination of multiple strings?

In my code, I have a span containing some text. By default, the <span class="switcher__result"> has a CSS property of display: none. However, when my <button class="switcher switcher__Last collapsible"> changes the text, the result span switche ...

javascriptjqueryhtmlajax

Using Backbone.js to Persist Information on the Server

Currently, I'm in the process of integrating my Backbone.js application with the server. One thing to mention is that I have customized my sync function in the collection to utilize jsonp: window.Project = Backbone.Model.extend({ initialize:func ...

javascriptjqueryajaxbackbone.js

Vue parent component not receiving events properly

Referring to these sources: Forum Post Stack Overflow Question In my project, I am utilizing: CodeSandbox Example The setup involves the parent component listening for events emitted by a child component: mounted() { this.$on("edit-category& ...

javascriptvue.jsvuejs2vue-componentvue-events

Transform the size and convert an object from a picture into text based on the user's scrolling

I've been intrigued by the scrolling effects used on websites like Google SketchUp and Google Plus. It's fascinating how elements can transform as you scroll down the page. For example, on Google SketchUp's site, the banner starts off integr ...

javascriptjqueryhtmlcssscroll

Hide the mobile menu after an option is clicked

I managed to implement a mobile menu on my single-page website by utilizing code I found online. Currently, the menu only opens or closes when the main navigation bar is selected due to the JavaScript I have integrated. Is it feasible for the menu to autom ...

javascriptjqueryhtmlcssmenu

Experiencing a blank page error when trying to render a partial view using Angular.js

Can someone assist me? I am encountering an issue where the partial view is not rendering properly using ui-router in Angular.js. Below is my code snippet. <!DOCTYPE html> <html lang="en" ng-app="Spesh"> <head> <meta charset="utf- ...

javascriptangularjsangular-ui-router

Issue with Ajax communication to PHP script causing data not to be sent

I am developing a web application that functions as an extensive form which will later be converted into a PDF document. Upon submission of the form, all input data is sent to a PHP file where they are stored as variables to be included in the PDF. Some of ...

javascriptphpajax

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

Using ReactJS to fetch data from a localhost PHP page

Currently, I am delving into the world of PHP and its integration with ReactJS. A peculiar issue has crossed my path, one that puzzles me as a solution seems out of reach. Displayed below is a simple form: class App extends React.Component { state ...

javascriptphpreactjsfetch-api

An error is being thrown by SetState when included within componentDidmount

I am currently learning React JS and have started working on a small application using it. I'm encountering an issue with the SetState method inside the componentDidMount lifecycle method. The scenario is that I have a parent/home component, which ca ...

javascriptreactjssetstate

Tips for displaying javascript code containing variables in the executeScript method

I'm currently working on a selenium script that involves executing JavaScript code using the executeScript method. I've run into an issue when it comes to handling single (') and double quotes (") while passing variables. Not Working: js.e ...

javascriptseleniumdomselenium-webdriver

German-formatted jQuery datepicker

Need help in changing jQuery datepicker formatting from MM/DD/YYYY to German style as d MMMM yyyy. Tried implementing the following code but encountering issues. <script type="text/javascript"> $(function () { $('.datepicker&ap ...

javascriptjqueryasp.net-mvc

Update the appearance of an element in real-time using VUEJS

I am trying to use VueJS to dynamically change the position of a div. In the data function, I have a variable called x that I want to assign to the top property. However, the code I wrote doesn't seem to be working. Here is what it looks like: <tem ...

javascriptcssvue.js

Having trouble retrieving state values from the store in Vue3

The data sent from index.vue to user.js is saved in the Array users. I confirmed that users received the data from index.vue using localstorage. I then attempted to access the Array users in chat.vue from users.js Unfortunately, I am experiencing issues w ...

vue.jsvuex

Issues with caching in a project involving Nuxt.js and nginx

My website's caching functionality is not working as expected. Website: . I have been checking the caching status by right-clicking -> inspect -> application -> storage (Google Chrome) I have tried the solution mentioned in this Stackoverfl ...

vue.jsnginxcachingnuxt.js

Leveraging ng-repeat within ng-view

I am facing an issue with using ng-repeat inside ng-view as the data is not being displayed. I have come across suggestions on forums to use a factory, but I am hesitant to utilize a service because my $scope data relies on $routeParams for querying. var ...

javascriptangularjsangularjs-ng-repeatangular-routingng-view

Mastering angle calculations in three.js

My current task involves creating a series of arcs using 102 lines (start point, endpoint, and 100 curve points) However, I'm facing an issue when the start point of an arc has a higher value than the end point. For instance: Start Point: 359 End ...

javascriptmaththree.jswebgl

Tips on connecting a button to the following page in vuejs2, especially when the subsequent page is always changing

Within my Vuejs application, I have implemented a series of tabs as shown below. My objective is to include buttons beneath the content of each tab that allow users to navigate to the "next" and "previous" tabs, with the buttons labeled according to the ti ...

vue.jsvuejs2vue-componentvue-router

Extract the current URL using jQuery/JavaScript and separate it into parts

Seeking assistance in combining these three code snippets into one functional script. 1) Obtain the URL of the active window. 2) Extract the ID from the URL. 3) Build an API request with the extracted ID included. The code snippet below retrieves the URL ...

javascriptjqueryhtml

Adjust the size of an HTML image for printing using a JavaScript window.print() function

On my website, I have a print option set up where specific elements are hidden using @media. How can I adjust the size of an image within the @media query when my JavaScript print function is triggered? I am able to modify a regular div element easily, but ...

javascriptphphtmlcssimage