如何在Vue组件中更新props

12

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

我收到了一个错误:

无法对“checked”进行赋值,因为它是一个常数或只读属性

你能帮忙解决这个问题吗?


我从未使用过TypeScript的Vue,但那可能相当于Vue 2 - Mutating props vue-warn - yuriy636
1
为什么不使用data属性而不是prop? - Dexygen
@GeorgeJempty 我不想使用数据,因为该选项已从组件外部(即父级)进行设置。 - Marek
只需在组件中指定一个名称不是checked的数据属性,并在设置该数据属性等于prop值的组件中添加一个created块--你是否访问了上面第一个评论中的链接?它提供了这个解决方案。 - Dexygen
@GeorgeJempty 我试过了,但是我在这个方法中遇到了一些问题。我没有改变从父组件传递给我的子组件的值。 - Marek
嗨@Marek!SO上的答案应该放在答案框中,而不是编辑到问题中。我已将您的答案移动到下面的社区wiki答案中。如果您想自己发布答案,只需让我知道,我会删除它。 - zcoop98
2个回答

24

看一下 prop.sync 修饰符。他就是为了像这种情况而设计的,即你想要更新父级的值但将其传递为子级属性:
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

基本上,你需要标记 prop 为 sync
<Checkbox :checked.sync="foo"></Checkbox>

然后,你可以从子组件中通过发出一个 update:prop 事件来更新父级:
this.$emit('update:checked', !this.checked)

这应该能够帮助你开始解决问题:
https://codesandbox.io/s/97rl86n64


只有我遇到这个问题吗?:'v-bind'指令上的'.sync'修饰符已被弃用。请改用'v-model:propName'。 - Doglas
2
@Doglas 这只适用于 > 3.0 版本,而不是 2.x 版本。 - TommyF
@RickyBoyce https://v3.vuejs.org/guide/migration/v-model.html#overview - TommyF

2

问题最初由OP @Marek编辑到问题中,由社区复制到此处。

我已经解决了这个问题。解决方案与@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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接