Modify the size value dialog during runtime

I am attempting to create a property or method that can change the size of my container dialog built using Vuetify.

Initially, I need it to look like this:

<v-flex xs12 md10>

I believe that by creating a variable property, I can dynamically change this value in another part of my website. For this purpose, I am trying the following:

<v-flex xs12 v-model="tamanio_dialog">

And I have added a prop in my component:

props: {
        formula:            { type: Object, required: true },
        loading:            { type: Boolean, default: false },
        tipoLiquidacion:    { type: Object, required: true },
        tipoLiquidacion_id: { type: Number },
        agrupacion_id:      { type: Number },
        aliasAplicacion:    { type: String, required: false},
        // INHERITS DATA FROM AUTHENTICATED USER
        usuario: {
            type: Object
        },
        tamanio_dialog: ['md10']
    },

When I call my Dialog, I am passing this property:

:tamanio_dialog="md12"

Although the size of my container dialog appears to be correct, the console log returns:

Property or method "md12" is not defined on the instance but referenced during render.

UPDATE

In my parent component, the size is always set to xs12 when it should be md10 in desktop size but xs12 only in my dialog.

I have tried the following variations in the child component:

tamanio_dialog="md12"
tamanio_dialog="'md12'"
:tamanio_dialog="'md12'"

I have updated the props component as follows:

props: {
            formula:            { type: Object, required: true },
            loading:            { type: Boolean, default: false },
            tipoLiquidacion:    { type: Object, required: true },
            tipoLiquidacion_id: { type: Number },
            agrupacion_id:      { type: Number },
            aliasAplicacion:    { type: String, required: false},
            // INHERITS DATA FROM AUTHENTICATED USER
            usuario: {
                type: Object
            },
            tamanio_dialog: {
                type:String, 
                default:'md10'
            }
            
        },

Update 2

I have attempted the following in my component where I expect the desired size:

<v-flex xs12 :mdProp="mdProp">

The props in this component are:

mdProp: {
    type: Number,
    default: 10
 }

When I call this component in the dialog:

:mdProp="12"

The result always sets the size to 12 and mdprop:

flex xs12 mdProp

Update 3

PaginaFormulasForm.vue (my child component)

mdProp: {
                type: Number,
                default: 10
            }

<v-flex :md="mdProp">

PaginaTipo page where I am building the dialog:

<v-card-text>
                                <PaginaFormulasForm :formula="formulaNuevoProps.formula"
                                        :loading="formulaNuevoProps.loading"
                                        :tipoLiquidacion="tipoLiquidacionById"
                                        :tipoLiquidacion_id="formulaNuevoProps.tipoLiquidacion_id"
                                        :agrupacion_id="formulaNuevoProps.agrupacion_id"
                                        :aliasAplicacion="'nuevoLinea'"
                                        :usuario="usuario"
                                        :mdProp="12"
                                        @guardar="crearFormulaEnLineaLiquidacion"
                                        @cerrar="cerrarDialogoFormula()"
                                        @toggleNuevoFormula="toggleNuevoFormula"
                                    />
                            </v-card-text>

The result in the web browser always shows md12 as the class:

class="flex md"

What am I doing wrong? Thank you for reading and sorry for any language errors.

javascriptvue.jsmodal-dialogvuetify.js

Answer №1

When using 

v-model="tamanio_dialog"
and setting the value of tamanio_dialog to md12, it may mistakenly interpret it as v-model="md12". This happens because md12 is considered a variable that is not existing in your data, resulting in an error.

To avoid this issue, consider utilizing grid classes such as xs="12", md="10", or md="12". Try the following approach-

-child component:

<child-component />
<child-component :md_prop="8" />
<child-component :md_prop="12" />

-parent component:

Note: v-flex is only available in Vuetify 1.x, whereas you are using Vuetify 2. Therefore, utilize v-col instead.

<v-col xs="12" :md="md_prop" />

props: {
  md_prop: {
    type: Number,
    default: 10
  }
}

Check out the demo where columns are dynamically created based on the passed props.
(For better visualization, view the result in full_page mode as the md class takes effect only on the full page.)

Vue.component('child-component', {
  template: `<v-row no-gutters class="mt-2"><v-col :md="md_prop" class="red lighten-4">md size - {{ md_prop }}</v-col><v-col class="amber lighten-4">Hello World</v-col></v-row>`,
  props: {
    md_prop: {
      default: 10,
    },
  }
})

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0472716144362a7c">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee989b8b9a878897aedcc096">[email protected]</a>/dist/vuetify.js"></script>
</script>
<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a2a1b1a0bdb2ad94e6faac">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
</head>
<div id="app">
  <v-app id="inspire">
    <v-card>
      <child-component/>
    </v-card>
    <v-card>
      <child-component :md_prop="12"/>
    </v-card>
    <v-card>
      <child-component :md_prop="8"/>
    </v-card>
  </v-app>
</div>

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

Choose to either check or uncheck boxes using ReactJS

After successfully creating a function to select either single or multiple boxes, I encountered an issue with the "Select all" feature. Any suggestions on how to resolve this? (I'm utilizing the material-ui library for my checkboxes, which are essenti ...

javascriptreactjsmaterial-ui

Is the automatic garbage collection of components a built-in feature of

Consider this scenario, where I have the following HTML document: <html> <head>... including all the necessary js and css files here...</head> <body> <div class="placeholderForExtPanel"></div> </b ...

javascriptextjsgarbage-collection

transfer scope variable to scope function

I notice this pattern frequently view: <input ng-model="vm.model"> <button ng-click="vm.method(vm.model)"></button> controller: function Controller() { var vm = this; this.method = function(parameter) { // perform acti ...

javascriptangularjs

Experiencing the 'Page prerendering error' message within Next.js

I encountered a prerender error during the deployment phase that I'm struggling to comprehend: Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error ⨯ useSearchParams() should be wrapped in ...

javascriptreactjsnext.js

Performing addition operations on numbers entered through an HTML input field using PHP

I am looking to create a feature where the numbers entered in an input form are added together. I need to store these numbers in an array and have them display in a new line when a button is clicked. Here is the HTML code for the input field and button: ...

javascriptphpjqueryhtml

What is the correct approach for detecting object collisions in Phaser 3?

Hey everyone, I'm facing a problem and could use some assistance. Currently, I am trying to detect when two containers collide in my project. However, the issue is that the collision is being detected before the objects even start moving on screen. It ...

javascripttypescriptphaser-framework

Is it true that event.stopPropagation does not function for pseudoelements?

I am facing an issue with event handling in my ul element. The ul has three li children elements, and the ul itself has a useCapture event handler for click. In the click event handler, I successfully stop the event using event.stopPropagation(), and every ...

javascripthtmlcss

Broaden the natural interface for the element

I'm looking to create a uniquely customized button in React using TypeScript. Essentially, I want to build upon the existing properties of the <button> tag. Below is a simplified version of what I have so far: export default class Button extend ...

javascripttypescript

"Utilizing ng-select with ng-model: A Step-by-Step Guide

Currently, I am working on a code that involves using ng-repeat to loop through options. My goal is to utilize ng-select to choose a value based on a specific condition. However, according to the AngularJS documentation: ngSelected does not interact wit ...

javascriptangularjs

Encountering difficulty locating a module despite following the correct path according to the official NEXT.js documentation

Recently, I delved into the world of next.js and found myself engrossed in chapter 4 of the official documentation titled "Creating Layouts and Pages." In this chapter, I was prompted to create a file named layout.tsx and insert the following code: import ...

javascriptreactjsnext.jsweb-development-serverweb-frontend

Troubleshooting Axios Authorization Issue in VueJS and Django Integration

I am currently working on a project that involves VueJS, Django, and Graphene-Django for GraphQL integration. Authentication is functioning properly as I am able to obtain a JWT Token. However, when attempting to use this token for other authenticated que ...

djangovue.jsgraphqlaxiosgraphene-django

can a computed property be delayed in its calculation?

Within the code snippet below, we can see that in the compPropsIsBtnDigitizePolygonDisabled function, it initially checks if the digitizePolygonInteractions variable is initialized. If it is not initialized, an error will be triggered. During execution, w ...

javascriptvue.jsvuejs2vuejs3vue-component

Convert the JSON data received from a jQuery AJAX call into a visually appealing HTML table

Utilizing AJAX as the action, I have created a search form. In the success of the AJAX request, I am seeking a way to update a specific div without refreshing the entire page. Below is my form: <?php $properties = array('id' => &ap ...

javascriptjqueryajaxjsoncodeigniter

JavaScript timekeepers and Ajax polling/scheduling

After looking into various methods like Comet and Long-Polling, I'm searching for a simpler way to push basic ajax updates to the browser. I've come across the idea of using Javascript timers to make Ajax calls at specific intervals. Is this app ...

javascriptajaxtimer

Two functions are contained within an object: Function A and Function B. Function A calls Function B from within its own code

If I have two functions within an Object. Object = { Function1() { console.log('Function 1') }, Function2() { this.Function1() } } The Function1 is not being executed. Can someone explain why this is happening an ...

javascriptfunctionobject

Create a "load additional data" button

I'm working on building my blog and I've run into a roadblock while trying to implement a load more button. Here's what I currently have: actions: { LOAD_ARTICLE_LIST: function ({ commit }) { axios.get('someurl/articles') ...

javascriptvue.jsvuex

The error message "TypeError: (0, _style.default) is not a function" occurred when using jest along with material

My current configuration looks like this: // .jestrc.json ... "moduleNameMapper": { "style$": "<rootDir>/tests/mock.ts" } // mock.ts export default {} This setup is typically used to exclude assets from jest to pre ...

javascriptjestjsmaterial-ui

Mastering Puppeteer: Tips for Successfully Submitting Forms

Can you use puppeteer to programmatically submit a form without a submit input? I have been successful with forms that include a submit input by using page.click('.input[type="submit"]'), but when the form does not have a submit input, focusing o ...

javascriptnode.jsgoogle-chrome-headlesspuppeteer

Using a single package manager for both backend and frontend development - is it possible? (Yarn/NPM)

Before, I relied on NPM for server-side tasks and Bower for frontend. NPM would install packages in the node_modules/ directory, while a .bowerrc file directed package installations to public/lib. Recently, I've made the switch to Yarn from NPM, and ...

javascriptnode.jsnpmyarnpkg

Generating Placeholder Variables Within a v-for Iteration

Encountering a problem with Vue-JS involving v-for loops and v-model properties. I have an array of items: <input v-for="i in list" v-model="i.model" ... (other tags that use i) > </input> Accompanied by some JavaScr ...

javascriptvue.jsuser-interfacefrontendv-for