Troubleshooting Vue Computed Property Doesn't Refresh

I am experiencing an issue with a computed function that I want to use. Every time I attempt to remove the forward slashes and 'SYG' at the end of the string "99/KRFS/010572//SYG" pasted into a v-model input, I receive the error message "Computed property was assigned to but it has no setter". My goal is to format the input as "99KRFS010572".

Below is the setup function I have:

<input v-model="policyMapName" />
policy-map <span>{{ policyMapName }}</span>

setup() {
    const circuitID = ref('99/KRFS/010572//SYG');

    const policyMapName = computed(() => {
        const cID = circuitID.value;

        return cID.replace(/[/]/g, '').slice(0, -3);
    });
}

Answer №1

It's advisable to incorporate a setter in your computed property alongside the getter:


<input v-model="policyMapName" />
policy-map <span>{{ policyMapName }}</span>

setup() {
    const circuitID = ref('99/KRFS/010572//SYG');

    const policyMapName = computed({
      get: () => {
        const cID = circuitID.value;

        return cID.replace(/[/]/g, '').slice(0, -3);
     },
    set:(newval)=>{
        circuitID.value = newval;
    }   
 });
}

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

Discover the secret to setting a default value in a Vue kendo-dropdownlist component

I have configured a vue kendo dropdownlist control using an array of objects for data population. <kendo-dropdownlist :data-source="months" :data-text-field="'abbrev'" :data-value-field="'value'" v-model="internal.s ...

Challenges arise when creating responsive map regions in Vue 3

I am currently working on a project in Vue 3 that involves an image map with click events on certain areas. The challenge I'm facing is that the images scale according to the browser size, but the coordinates of the image map are fixed pixel sizes. I& ...

Monitoring Vue for ongoing HTTP requests

Upon mounting a component, it initiates 4 HTTP requests (using Axios) to fetch the necessary data. Is there a method to monitor for any outstanding HTTP requests? To simplify: Are there any pending HTTP requests? yes -> Loading=true no -> Loading ...

Transforming Adobe Animate CC into a customized Vue.js component

Can someone share the optimal method for integrating published Adobe Animate CC HTML5 canvas / JS files into a Vue.js component? Appreciate it ...

Why is it possible to import the Vue.js source directly, but not the module itself?

The subsequent HTML code <!DOCTYPE html> <html lang="en"> <body> Greeting shown below: <div id="time"> {{greetings}} </div> <script src='bundle.js'></script& ...

Using Vue.js to submit a form in Laravel and redirecting with a flash message

I am facing an issue where I have two components named Index and Create, loaded from separate blade files. The challenge is passing a flash message as a prop between these components due to their file separation. How can I redirect after submitting a form ...

What is the solution to resolving the error message "Uncaught ReferenceError: Pusher is not defined" in Vue.js 2?

Whenever I try to launch my application, the console shows the following error: Uncaught ReferenceError: Pusher is not defined and Uncaught ReferenceError: App is not defined Despite running the following commands in my terminal: npm install and ...

How can you share a variable with all Vue components without the need to pass it through props every time?

One thing I'm curious about is the use of react consumer and provider for passing variables in React. Does Vue offer a similar feature? I have a Firebase class that needs to be passed to almost every component, and passing it through props doesn&apos ...

Warning message will appear before navigating away from the page if vee-validate is

Wondering how to create a simple confirmation prompt asking if the user really wants to leave a page that includes a basic HTML form. The HTML Form: <!DOCTYPE html> <html> <head></head> <body> <div id="app"> ...

Utilizing vuex for Apollo pagination

Trying to incorporate vuetify's pagination component with the nuxtjs@apollo module has been quite a challenge for me. I'm facing difficulties making it work seamlessly with my vuex store. To avoid overwhelming you, I'll skim through most o ...

Exploring the world of typed props in Vue.js 3 using TypeScript

Currently, I am attempting to add type hints to my props within a Vue 3 component using the composition API. This is my approach: <script lang="ts"> import FlashInterface from '@/interfaces/FlashInterface'; import { ref } from &a ...

Leverage the power of i18n in both vuejs components and blade.php templates

Is it possible to use i18n in both blade.php and Vue.js views? I have set up a json file for i18n as shown below: export default { "en": { "menu": { "home":"Home", "example":"Example" } } } Using this i18 ...

Troubleshooting issues with gh-pages in Nuxt.js

Working on a project in nuxt.js was going smoothly until I tried to deploy it on gh-pages using npm install gh-pages --save-dev. After adding some code to packed.json, everything seemed fine and I could view my project on gh-pages: However, all of a sudde ...

How can I use cookies to make an HTML div disappear when a button is clicked?

I've been attempting to conceal this message in Vue.js, but so far I haven't had any luck. Currently, I am utilizing the js-cookie library. My objective is as follows: HTML <div v-show="closeBox()"> < ...

Adding local JavaScript to a Vue component is a great way to enhance its functionality

I am currently working on integrating a homepage concept (Home.vue) into my project. The design is based on a template that I purchased, which includes CSS, HTML files, and custom JavaScript. While most of the CSS has been successfully imported, I am havin ...

Securing your Laravel and Vue source code: Best practices

Recently developed a website using Laravel and Vue. Seeking advice on safeguarding the code from unauthorized copying (both PHP and VUE) while hosting the project on a VPS server? Specifically looking for ways to protect the code within the resources fol ...

I seem to have mistakenly bound my conditional class to everything that was iterated in my object. Can you help me identify what I did wrong?

I recently received an object from a Last.FM API call containing the last 100 songs I listened to. If there is a song currently playing, there is a nowplaying flag on the first item in the object. I'm attempting to bind a class to the markup if this ...

Interpolating values in Vue for key-value pairs

Imagine that in Vue.js, I have a data property named iconsColor, which is initially set to #b5ffff: data() { return { iconsColor: "#b5ffff", }; }, My goal is to utilize this property when setting the color like so: :style="{ ...

When no values are passed to props in Vue.js, set them to empty

So I have a discount interface set up like this: export interface Discount { id: number name: string type: string } In my Vue.js app, I am using it on my prop in the following way: export default class DiscountsEdit extends Vue { @Prop({ d ...

Vue's parent-child components interact through asynchronous lifecycles

Even though I'm directed to 'myFavouritePage', the message 'Hi, I'm child' is displayed after the redirection. Is there a parent function that creates the child components upon completion? Parent: beforeCreate () { var or ...