The property was computed but cannot be set - specifically for a toggle component

Question

The property was computed but cannot be set - specifically for a toggle component

I am currently working on developing a switch toggle component in Vue that includes a v-model and @updated. However, I am encountering difficulties when trying to update the model once the user toggles the switch. Initially, I faced an issue regarding mutating a prop directly. Now, another error has arisen.

[Vue warn]: Computed property "isSwitchOn" was assigned to but it has no setter.

The intended usage of this component is as follows:

<iswitch v-model="switchGender" @updated="handleUpdatedGender" />

Below is the code for the component itself:

export default {
    template: `
        <span
            @click="toggleSwitch"
            :class="{ active: isSwitchOn }">

            <span class="toggle-knob"></span>
        </span>
    `,

    props: ['value'],

    methods:
    {
        toggleSwitch()
        {
            this.isSwitchOn = !this.isSwitchOn

            this.$emit('input', this.isSwitchOn)
            this.$emit('updated')
        }
    },

    computed:
    {
        isSwitchOn()
        {
            return this.value
        }
    },
};

javascript vue.js

Answer 1

Answer №1

An issue arises from executing this line of code:

this.isSwitchOn = !this.isSwitchOn

. The attempt to assign a value to a computed property without specifying a setter is the root cause of the error.

To resolve this, you must define your computed property properly to function as both a getter and a setter:

computed:
{
    isSwitchOn:
    {
        get()
        {
            return this.value
        },
        set(value)
        {
            this.value = value
        }
    }
}

Furthermore, it is not recommended to directly alter a prop. Instead, consider creating a new data property and synchronize it with the value prop using a watcher.

A potential solution could look like this:

props: ['value'],
data()
{
    return {
       val: null
    }
},
computed:
{
    isSwitchOn:
    {
        get()
        {
            return this.val
        },
        set(value)
        {
            this.val = value
        }
    }
},
watch: {
   value(newVal) {
       this.val = newVal
   }
}

Answer 2

An issue arises from executing this line of code:

this.isSwitchOn = !this.isSwitchOn

. The attempt to assign a value to a computed property without specifying a setter is the root cause of the error.

To resolve this, you must define your computed property properly to function as both a getter and a setter:

computed:
{
    isSwitchOn:
    {
        get()
        {
            return this.value
        },
        set(value)
        {
            this.value = value
        }
    }
}

Furthermore, it is not recommended to directly alter a prop. Instead, consider creating a new data property and synchronize it with the value prop using a watcher.

A potential solution could look like this:

props: ['value'],
data()
{
    return {
       val: null
    }
},
computed:
{
    isSwitchOn:
    {
        get()
        {
            return this.val
        },
        set(value)
        {
            this.val = value
        }
    }
},
watch: {
   value(newVal) {
       this.val = newVal
   }
}

Answer 3

Answer №2

By default, computed properties are read-only, but you can add a setter if needed. Refer to the official documentation

computed:
{
    isSwitchOn() {
        get() { return this.value }
        set(val) { this.value = val }
    }
}

Different approach:

In the parent component:

<iswitch ref="switcher" @input="methodForInput" v-model="switchGender" @updated="handleUpdatedGender" />

methods: {
  methodForInput(event){
    this.$refs.switcher.isSwitchOn = event;
  }
}

In the child component:

export default {
    template: `
        <span
            @click="toggleSwitch"
            :class="{ active: isSwitchOn }">

            <span class="toggle-knob"></span>
        </span>
    `,

    data() {
      return {
        isSwitchOn: false
      };
    },

    methods:
    {
        toggleSwitch()
        {
            this.isSwitchOn = !this.isSwitchOn

            this.$emit('input', this.isSwitchOn)
            this.$emit('updated')
        }
    }
};

Updates 3: Apologies for missing the parent component initially.

Answer 4

By default, computed properties are read-only, but you can add a setter if needed. Refer to the official documentation

computed:
{
    isSwitchOn() {
        get() { return this.value }
        set(val) { this.value = val }
    }
}

Different approach:

In the parent component:

<iswitch ref="switcher" @input="methodForInput" v-model="switchGender" @updated="handleUpdatedGender" />

methods: {
  methodForInput(event){
    this.$refs.switcher.isSwitchOn = event;
  }
}

In the child component:

export default {
    template: `
        <span
            @click="toggleSwitch"
            :class="{ active: isSwitchOn }">

            <span class="toggle-knob"></span>
        </span>
    `,

    data() {
      return {
        isSwitchOn: false
      };
    },

    methods:
    {
        toggleSwitch()
        {
            this.isSwitchOn = !this.isSwitchOn

            this.$emit('input', this.isSwitchOn)
            this.$emit('updated')
        }
    }
};

Updates 3: Apologies for missing the parent component initially.

The property was computed but cannot be set - specifically for a toggle component

Answer №1

Answer №2

Similar questions

Updating array object properties within nested for loops in JavaScript can be challenging

Loading templates (partials) in Angular.js on the fly

What steps do I need to take to retrieve data in a JSON array based on its

What is the proper way to employ if and else if statements within Angular2?

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Use Angular.js to perform navigation after clicking the "Ok" button on a confirmation box

Drag the label into the designated paragraph to copy the text. Click on the specific point to transfer the text

Connect a function to create a new document element in order to modify the

Display the div only when the time variable reaches zero

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

What can be done to ensure that two separate react-native Picker components do not interfere with each other's

Methods for validating ajax response with Jasmine

Ensuring Date Data Integrity with HTML5 Validations

What is the proper way to include "arr[i]" within a for loop?

The back-end code on the server is unable to identify the variable in my req.body, as it is being flagged

How to resolve the issue of "Fixing 'Unhandled Runtime Error TypeError: event is undefined'"

Strategies for delaying the loading of CSS when importing

Tips for making a website display in landscape mode rather than portrait orientation

What is the best way to activate a function within an npm package in a Vue application?

What is the best way to utilize Vue 3's native KeepAlive component to store a child component of a webpage in memory, ensuring that it only retrieves data from its API upon initial page load?