How to update props in vue component

Question

I want to create my own checkbox in Vue. I want to use two icons from fontawesome (lock and unlock). When my checkbox is checked then icon should be locked otherwise unlocked.

Here is my code:

<template>
   <div>
      <i @click="statusChanged()" v-if="!checked" class="fas fa-lock-open lock"></i>
      <i @click="statusChanged()" v-if="checked" class="fas fa-lock lock"></i>
   </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
        type: Boolean as Prop<boolean>,
    },
},
methods: {
    statusChanged() {
        this.checked = !this.checked;
    },
},
});

I received an error:

Cannot assign to 'checked' because it is a constant or a read-only property

Can you help resolve this issue?

I've never used Vue with TypeScript but that is probably the equivalent of [Vue 2 - Mutating props vue-warn](https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn) — yuriy636, Oct 19 '18 at 21:57
@GeorgeJempty I don't want to use data because this option checked is set from outside the component, from parent — Marek, Oct 20 '18 at 07:48
Just specify a data attribute with a name other than checked, and add a `created` block to the component where you set that data attribute equal to the value of the prop -- did you visit the link in the first comment above? It suggests this solution. — Dexygen, Oct 20 '18 at 14:23
@GeorgeJempty I did but I have some problems with that approach. I did not change value from parent passed to my child component. — Marek, Oct 20 '18 at 19:12
Hi @Marek! Answers on SO belong in the answer box, rather than edited into the question. I've moved your answer into a [*community wiki* answer below](https://stackoverflow.com/a/67928827). If you instead want to post the answer yourself, just let me know and I'll delete it. — zcoop98, Jun 10 '21 at 21:53

score 24 · Answer 1 · edited Jul 15 '22 at 02:52

24

Take a look at the prop.sync modifier. It is made for exactly this kind of case where you want to update the parents value but pass it as a property to the child:
https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Basically you mark the prop as being sync'able:
<Checkbox :checked.sync="foo"></Checkbox>

And to update the parent you emit an update:prop event from the child:
this.$emit('update:checked', !this.checked)

This should get you started for your solution:
https://codesandbox.io/s/97rl86n64

edited Jul 15 '22 at 02:52

tony19

125,647
18
229
307

answered Oct 21 '18 at 15:29

TommyF

6,660
8
37
61

It happens just for me?: '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead. – Doglas Nov 16 '20 at 22:19
2

@Doglas that's only true for > 3.0, not for 2.x – TommyF Nov 24 '20 at 15:06
@RickyBoyce https://v3.vuejs.org/guide/migration/v-model.html#overview – TommyF Mar 31 '21 at 07:48

score 2 · Answer 2 · answered Jun 10 '21 at 21:48

^{Answer originally edited into question by OP @Marek, copied here by the community.}

I was able to resolve the problem. Solution was really similar to what @TommyF suggested.

Here is the solution:

<template>
<div>
    <i v-if="!checked" class="fas fa-lock-open lock" @click="statusChanged()"></i>
    <i v-if="checked" class="fas fa-lock lock" @click="statusChanged()"></i>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
            type: Boolean as Prop<boolean>,
        },
    },
    model: {
        prop: 'checked',
        event: 'click',
    },
    methods: {
        statusChanged() {
            this.$emit('click', !this.checked);
        },
    },
});
</script>

How to update props in vue component

2 Answers2

Linked