web-dev-qa-db-fra.com

Comment mettre à jour les accessoires dans le composant vue

Je veux créer ma propre case à cocher en vue. Je veux utiliser deux icônes de fontawesome (verrouiller et déverrouiller). Lorsque ma case est cochée, l'icône doit être verrouillée, sinon déverrouillée.

Voici mon 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;
    },
},
});

J'ai reçu une erreur:

Impossible d'affecter à "vérifié" car il s'agit d'une propriété constante ou en lecture seule

Pouvez-vous aider à résoudre ce problème? Merci d'avance

Mise à jour:

J'ai pu résoudre ce problème. La solution était vraiment similaire à ce que TommyF a suggéré.

Voici la 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>
typescriptvuejs2vue-component
4
Marek

Jetez un œil au modificateur prop.sync. Il est fait pour exactement ce type de cas où vous souhaitez mettre à jour la valeur des parents mais la transmettre en tant que propriété à l'enfant:
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Fondamentalement, vous marquez l'accessoire comme étant sync 'capable:
<Checkbox :checked.sync="foo"></Checkbox>

Et pour mettre à jour le parent, vous émettez un événement update:prop De l'enfant:
this.$emit('update:checked', !this.checked)

Cela devrait vous aider à démarrer votre solution:
https://codesandbox.io/s/97rl86n64

8
TommyF