typescript 如何在 vue 组件中更新 props
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52900308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update props in vue component
提问by Marek
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.
我想在 vue 中创建自己的复选框。我想使用 fontawesome 中的两个图标（锁定和解锁）。当我的复选框被选中时，图标应该被锁定否则解锁。
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? Thank you in advance
你能帮助解决这个问题吗？先感谢您
Update:
更新：
I was able to resolve than problem. Solution was really similar to what TommyFsuggested.
我能够解决比问题。解决方案与TommyF建议的非常相似。
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>
回答by TommyF
Take a look at the prop.syncmodifier. 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://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
看看prop.sync修改器。它正是为这种情况而设计的，您希望更新父值但将其作为属性传递给子级：https:
//vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
Basically you mark the prop as being sync'able:<Checkbox :checked.sync="foo"></Checkbox>
基本上，您将道具标记为sync“能够：<Checkbox :checked.sync="foo"></Checkbox>
And to update the parent you emit an update:propevent from the child:this.$emit('update:checked', !this.checked)
要更新父级，您update:prop从子级发出事件：this.$emit('update:checked', !this.checked)
This should get you started for your solution:
https://codesandbox.io/s/97rl86n64
这应该让你开始你的解决方案：https:
//codesandbox.io/s/97rl86n64
