Conceal the parent component's <button> element within the Child component

I'm facing an issue with hiding a button in my parent component from the child component. I tried using props to bind the element and v-show directive to hide it, but instead of just hiding the button, it ends up hiding the entire tab.

Take a look at my parent component:

<div class="col-lg-auto" v-if="unpaid.qr_code === 1">
    <q-btn glossy
           size="md"
           :label="$t('Common.GetQrCode.Button')"
            @click="makePayment(unpaidIndex, true)" color="positive"
            v-bind="share">
    </q-btn>
</div>

<div class="col-lg-auto" v-if="unpaid.qr_code === 1">
       -- OR --
</div>

props: {
  share: {
    type: Boolean,
    default: true
  },

This component is also used in other components. Moving on to my child component:

<payment-tab v-if="depositRefundID !== undefined && depositRefundID !== null && depositRefundID !== '' && loadingComplete" v-show:share="false">
javascriptvue.jsfrontendquasar-framework

Answer №1

Concealing the child could be a clever move.

If you prefer, I managed to tackle this scenario efficiently using React.

The approach involved passing a function from parent to child; this function would update data in the parent and determine whether to display the child component.

new VueComponent('parent', {
    template: `
    <div class="...">
        <child-component v-for="obj in object_list" v-if="obj.show" />
    </div

    data: {
       object_list: [
           {show:true, id:1, ...},
           {show:true, id:2, ...},
           {show:false, id:3, ...}
       ]
    },
    methods: {
        toggle_show: function(item_id){
              let item = this.object_list.filter(_item => {_item.id === item_id})
              item.show = !item.show;
        }
    }
})

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

Troubleshooting Jqgrid Keyboard Navigation Problem

Here is a link to the jsfiddle code snippet. Upon adding jQuery("#grid").jqGrid('sortableRows'); into my JavaScript code, I encountered an issue where keyboard navigation no longer worked after sorting rows Below is the JavaScript code snippet: ...

javascriptjqueryjquery-uijqgrid

Configuring multiple views directories in Express fails to function as expected

Looking to define multiple views directories in Express. Working with Express version 4.16.3, Node.js version v10.15, and EJS version 2.5.9. app.set('views', [path.join(__dirname, 'views'), path.join(__dirname, 'public/static/&apo ...

javascriptnode.jsexpress

Troubleshooting Angular Reactive Forms: Issue with Binding Dynamic Select Dropdown Value

I currently have two arrays of data: AssociatedPrincipals, which contains previously saved data, and ReferencePrincipals, which consists of static data to populate dropdown controls. I am facing difficulties in displaying/selecting the previous value from ...

javascriptangularangular-reactive-forms

Tips for saving images in an S3 bucket

Within my express application, I currently save images to a directory in my repository. However, I am beginning to think that this approach may not be ideal and I am considering using AWS S3 as an alternative storage solution. Since I have never worked w ...

javascriptnode.jsexpressamazon-s3

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

I am currently working on a function that retrieves data from Firebase's real-time database and stores it in an array for mapping in React. However, I am encountering a TypeScript error that I'm having trouble resolving. The error message reads ...

javascriptreactjstypescriptvariablesionic-framework

Reduce the identification number within a JSON array following the removal of an item

Within my local storage, I maintain a dynamic array. Each entry is accompanied by an ID that increments sequentially. If a user opts to delete an entry, it should be removed from the array while ensuring that the IDs remain in ascending order. For example: ...

javascriptjqueryarraysjsonlocal-storage

Adjust image source based on media query (CSS or JavaScript)

Is there a way to update the image src based on a media query with a maximum width of 515px? I'm considering using JavaScript, jQuery, or even AngularJS if there is an event equivalent to a CSS media query that can achieve this. I want to have differ ...

javascriptjqueryhtmlcssimage

What is the key to ensuring the content in your canvas adapts to different screen sizes

Greetings! I wanted to extract the values from this specific meta tag: <meta name="viewport" property="viewport" content="width-device-width, initial-scale=1"> To retrieve content from a meta tag using JavaScript, I used the following code snippet: ...

javascripthtmlcanvastypescript

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

How do I hide table rows based on dropdown selection? The first table has a dropdown with two options: Current State and Future State. If I select Current State, I want to show or hide specific rows in the 2nd and 3rd tables. I am using IDs for these row ...

javascriptjqueryhtml

Utilizing Ajax to dynamically submit specific form fields

I'm just starting out with Jquery ajax, and I'm experimenting with submitting specific fields for validation instead of the entire form. I've created a function to check if a username is available, and it's working well. However, I want ...

javascriptjqueryajax

The MongoDB regex is failing to provide the expected outcome

I'm facing an issue with searching data in MongoDB. I have a table with approximately 5000 entries of data that need to be searched based on multiple columns with specific priority criteria. The first priorities for the search are symbol, name, co_nam ...

javascriptnode.jsregexmongodb

The error message that occurs when using angularjs $scope.$apply() is: Error: [$rootScope:inprog]

Having trouble updating text on a page within the $scope. Facing this error message: Error: [$rootScope:inprog] [http://errors.angularjs.org/1.2.15/$rootScope/inprog?p0=%24apply] at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/ ...

javascriptangularjs

What methods can be used to authenticate the user's input?

I am facing an issue with my program where it breaks if there is a space behind the last number entered. I want to prevent the function from breaking when a space is entered. I tried using $.trim but couldn't get it to work. I also attempted using an ...

javascripthtml

Jquery(Ajax) call encountered a problem when attempting to send the object

Struggling to send data to a MongoLab DB using JS and JQueryAjax call. The issue lies in being able to see the OID in the DB but no data is actually populated. Upon checking the code and network settings, it's evident that the payload always remains e ...

javascriptjqueryajaxmongodbmlab

Leaflet OSM: Adjust map focus to the polygon's center

Looking to create an HTML file that integrates the Leaflet library to display an OpenStreetMap view with a centered polygon? I've been following a helpful discussion, but still unsure about how to center and autozoom an arbitrary polygon on the map. A ...

javascripthtmlopenstreetmapleaflet

The Angular framework's structure is loaded in a combination of synchronous and asynchronous ways once the primeng tableModule

Encountered this error while trying to load the TableModule from primeng into my components module file and running 'npm run packagr': Maximum call stack size exceeded To address this, I switched my primeng version from primeng12 to primeng11.4. ...

javascripttypescriptmoduleprimengnpm-package

Combine an array of objects using the main key in each object

I have an array of objects with different years and details var worksSummaryDetailsArr = [ { year: 2020, worksSummaryDetailsObj: [ [Object], [Object], [Object], [Object] ] }, { year: 2021, worksSummaryDetailsObj: [ [Object], [Object], ...

javascriptarraysjsonobject

Error in Angular form validation: Attempting to access property 'name' of an undefined value

Recently, I encountered an issue with my form while implementing Angular validation. The goal was to ensure that the input fields were not left blank by using an if statement. However, upon testing the form, I received the following error message: Cannot ...

javascriptangularjs

Is it possible to assign a value to the "input" that is different from the Vue variable?

I am looking to dynamically change the display of an input based on the value retrieved from a database for the variable: paragraph.RCBulletinNumber I have experimented with using the computed method, however, it seems that this approach may not be suitab ...

vue.js

What is causing my component callback to not function properly?

I'm currently following a tutorial on AngularJS callbacks from . In my code at https://plnkr.co/edit/dxyI0p0pZFZdMalLfvXO?p=preview, I've attempted to showcase the issue I'm encountering. I have initialized the component in three different w ...

javascriptangularjscallbackcomponents