Question

我想在vue中创建自己的复选框。我想使用fontawesome中的两个图标（锁定和解锁）。选中我的复选框后，图标应该被锁定，否则将被解锁。

这是我的代码

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

我收到一个错误：

由于它是常量或只读属性，因此无法分配给“已检查”

您能帮助解决此问题吗？预先谢谢你

更新：

我比问题能够解决。解决方案与 TommyF 的建议非常相似。

这是解决方案：

<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>

Answer 1

看看prop.sync修饰符。正是这种情况，您想更新父母的价值，但是将其作为属性传递给孩子：
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

基本上，您将道具标记为sync'able：
<Checkbox :checked.sync="foo"></Checkbox>

要更新父级，您需要从子级发出update:prop事件：
this.$emit('update:checked', !this.checked)

这应该可以帮助您开始解决问题：
https://codesandbox.io/s/97rl86n64

Answer 2

^{最初由 OP @Marek 编辑成问题的答案，由 the community 复制到此处。}

我能够解决问题。解决方案非常类似于@TommyF suggested。

解决办法如下：

<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>

如何在Vue组件中更新道具

2 个答案: