Updating prop values within Vue JS using Alert component

I am utilizing VueStrap components that are based on the following link: Regrettably, I encounter an error when attempting to set the visibility for an alert within my code:

HTML:

<alert :show="showAlert" placement="top-right" :duration=3000 v-bind:type="alertType" style="height:90px; min-width:380px;" dismissable>
      <span class="icon">
        <i style="font-size: xx-large;" class="fa fa-check-circle" v-if="alertType==='info'"></i>
        <i style="font-size: xx-large;" class="fa fa-info-circle" v-if="alertType==='danger'"></i>
        <i style="font-size: xx-large;" class="fa fa-check-circle" v-if="alertType==='success'"></i>
      </span>
      <div class="alertContent">
        <strong v-if="alertType==='success'">Success</strong>
        <strong v-if="alertType==='danger'">Error</strong>
        <p v-html="AlertInside"></p>
      </div>
</alert>

When binding :show based on showAlert everything functions correctly but prompts an error stating "

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show" found in --->Alert>

I have experimented with v-model, :show.sync, however, vmodel does not function at all and .sync does not generate any changes.

The information on Github suggests that vue js version 2.1.x is required, though I recall encountering a similar issue with someone using vue 1.0. My current vue version stands at 2.5.16

I have been searching for a solution for quite some time now without finding any satisfactory answers, please provide assistance :)

asp.net-mvcmodel-view-controllervue.jsvuejs2vue-component

Answer №1

As mentioned by @Jayem163, there was an alert issue when attempting to update the show variable in a child component. It turned out that the problem was within the VueStrap component, and after dismissing the alert, something like this occurred:

watch: {
    show(val) {
      if (this._timeout) clearTimeout(this._timeout)
      if (val && Boolean(this.duration)) {
        this._timeout = setTimeout(() => {
          this.show = false; ---> I modified this to :this.$emit('update:show', false ); AND IT WORKS WITHOUT ERROR :)
        }, this.duration)
      }
    }
  }

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

What is the best way to determine the count of results using a v-if statement?

Sorry for the possibly silly question, but I'm trying to figure out how to retrieve the number of results from my v-if statement within a v-for loop? This is what my code looks like: <div v-for="conv in conversation.hits" :key="conv ...

vue.jsvuejs2

Can we implement a variety of site designs based on the size of the window?

Utilizing media queries allows us to modify the CSS for various screen sizes. My inquiry is: can we switch to a completely different page layout (or View in MVC) when the window size, specifically when the width is less than 500? Assuming that the control ...

cssasp.net-mvc

Retrieve information from JsonResult

While working with ASP.NET Core, the MVC controller is returning JSON data. I am currently attempting to retrieve this data in a unit test. The best solution so far has been string data = JsonConvert.SerializeObject(jsonResult.Value); and then comparing ...

c#jsonasp.net-mvcunit-testingasp.net-core-mvc

Assigning a new classification to the primary object in the evolving array of objects

I'm working with an element that loops through all the objects using v-for and has a CSS class named top-class{}... I need to dynamically add the top-class to the first object (object[0]) and update it based on changes, removing the old top-class in t ...

javascriptcssvue.jsobjectvuejs2

Having trouble initializing the canvas with fabric.js and Vue.js, as the function this.lowerCanvasEl.getContext is not recognized

When attempting to initialize a canvas in a VueJS component, I encountered an issue. Here is an example: https://jsfiddle.net/eywraw8t/55338/ I tried initializing the canvas in the mounted hook, ensuring that the DOM is available. Fabric seems to be worki ...

javascriptvue.jsfabricjs

Can a cancel button be added to a mobile keyboard for easier use?

Looking to streamline the mobile UI for my Vue-built SPA by removing unnecessary buttons. Encountering an issue with form submission on mobile keyboards triggering unwanted listeners. Is there a way to introduce a cancel button for forms on mobile? ...

formsvue.jsmobilesingle-page-application

Encountering an unexpected error with VueJS and Nuxtjs: Unexpected Token 'export'

My index page code was working perfectly fine, but suddenly stopped functioning and threw an error: SyntaxError Unexpected token export The issue seems to be with the script section where I am importing a package. Removing the import resolves the error, ...

vue.jsnuxt.js

Vuejs v-for nested loops

After spending countless hours researching, I am determined to solve this problem. My objective is to create a questionnaire similar to a Google Form, with question groups, questions, and answers. The structure of my data looks like this: question_group: ...

javascriptarraysloopsvue.jsv-for

Uploading files with additional information in Vue.js

Previously, I utilized Vue Dropzone for file uploads which was quite straightforward. However, I have a query regarding a functionality that I am unsure is feasible. Here's the scenario: Users drag files to the dropzone area and they are added to the ...

vue.jsvuejs2

What is the best way to add Vue dependency using CDN?

For my project which is built using Kendo, Vue, .Net, Angular and jQuery, I need to incorporate https://www.npmjs.com/package/vue2-daterange-picker. <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

javascriptjqueryvue.jskendo-asp.net-mvcscriptbundle

How to Collapse or Expand Grouped Items in Vuetify 2 Data Tables

Currently, in my table, I have multiple items grouped by a string property and all groups are expanded by default. If you would like more information on the tables I am using, please visit https://vuetifyjs.com/en/components/data-tables/#grouped-rows Is ...

vue.jsvuetify.js

Leveraging @click within dropdown selections - Vue.js 2

Is there a way to implement the @click event in select options? Currently, I have the following: <button @click="sortBy('name')">sort by name</button> <button @click="sortBy('price')">sort by price</button> Th ...

javascriptvuejs2

What is the significance of the source element in Vue3's audio element?

Playing mp3 files works in Vue 2, but not in Vue3. <template> <audio src="../file_example_MP3_700KB.mp3" controls ></audio> </template> In Vue3, the code needs to be modified as follows: <template> <audi ...

javascripthtmlvue.jsvuejs3

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

I'm attempting to utilize a random string (UUID v4) using vue-uuid for existing items and future additions to the list in my to-do list style application. However, I'm uncertain about the correct syntax to use. After installation, I included it ...

javascriptvue.js

Utilizing Firebase for Microsoft authentication

Currently, I am working on integrating Microsoft authentication with Firebase for a web project built in Vue.js 2. I have meticulously followed the steps outlined in the Firebase documentation and also referred to the Azure portal documentation for creatin ...

firebasevue.jsauthenticationvuejs2firebase-authentication

I'm having trouble retrieving the sessionid while using vue-cookies

Attempting to retrieve the sessionid from a cookie using vue-cookies. After importing vue-cookies, I checked and printed the cookies: import VueCookies from 'vue-cookies'; Vue.use(VueCookies); console.log(Vue.cookies.keys()); Despite seeing bo ...

vue.js

Exploring the depths of Vue.js: Maximizing potential with nested

In my Grid component, I retrieve JSON data from a server and render it. The data mainly consists of strings and integers, but sometimes includes HTML elements like <strong>myvalue</stong>. In order to properly display the data, I use triple bra ...

javascriptvue.js

What is the best way to add multiple Vue components to my Vue page?

Is there a more efficient way to handle multiple imports without having to write them all out individually? import button1 from './components/button1' import button2 from './componnets/button2' import table1 from './componnets/tabl ...

vue.jsecmascript-6vuejs2

Changing global properties in VueCli

Recently, I integrated a component library into my Vue 3 project. All instances of the component require the same styles. Instead of manually adjusting each instance's props, I opted to utilize a global property: app.config.globalProperties.$tooltipS ...

javascriptvue.jsvuejs3

Issue with Framework7 toggle component's reactivity being ineffective

I am currently utilizing Vue and Framework7 for the development of an android app. Within a list, I have 4 toggles where only one can be active at a time. The active toggle must also be disabled to ensure that there is always at least one active toggle. ...

vue.jshtml-framework-7