javascript - Vue 3:v-model 助手不是响应式的
问题描述
我为 vue 3 v-model 绑定写了一个小帮手。奇怪的是,它不能完全反应。内部更改以正确的方式发出,外部更改无法识别。但是如果我在我的组件中使用相同的计算函数,一切都会按预期工作。我如何编写帮助程序以完全反应?
帮手:
import { computed, SetupContext, WritableComputedRef } from 'vue';
export const vModel = <T>(val: T, context: SetupContext, binding = 'modelValue'): WritableComputedRef<T> =>
computed({
get: () => val,
set: (value) => {
context.emit(`update:${binding}`, value);
},
});
证监会:
<template>
<div class="ms-deleteInput">
<input class="ms-deleteInput__input" :label="label" v-model="inputVal" />
<button @click="$emit('delete')" />
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: "deleteInput",
props: {
modelValue: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
},
setup(props, context) {
// This works
const inputVal = computed({
get: () => props.modelValue,
set: (value) => {
context.emit(`update:modelValue`, value);
},
});
// This works, but external changes of modelValue prop will not be detected:
const inputVal = vModel(props.modelValue, context);
return {
inputVal,
};
},
});
</script>
解决方案
谢谢您的回答!它现在可以使用:
import { computed, SetupContext, WritableComputedRef } from 'vue';
export const vModel = <T>(props: Record<string, T>, context: SetupContext, binding = 'modelValue'): WritableComputedRef<T> =>
computed({
get: () => props[binding],
set: (value) => {
context.emit(`update:${binding}`, value);
},
});
但打字不正确。我得到错误:
Argument of type 'Readonly<LooseRequired<Readonly<{ modelValue?: unknown; label?: unknown; } & { modelValue: string; label: string; } & {}> & { [x: string & `on${string}`]: undefined; }>>' is not assignable to parameter of type 'Record<string, string>'.
'string & `on${string}`' and 'string' index signatures are incompatible.
Type 'undefined' is not assignable to type 'string'.
我在函数内尝试了几种类型props
,但它们似乎都不正确。我在 vue 文档中找不到输入的好方法。
推荐阅读
- sql - 计算递归函数每次调用所花费的时间......在SQL中
- laravel - 在我的 Laravel 应用程序的开发环境中为所有广播频道添加前缀
- python - 模拟命名空间混乱的函数
- laravel - 如何从laravel存储文件夹中获取文件作为url并将它们转换为vuejs中的base 64?
- python - Lambda 函数无法连接到 redshift:致命:主机没有 pg_hba.conf 条目
- javascript - 使用 useState 更新不会在 React 中重新渲染页面
- python - 通过从其他工作表中查找分母值,用 Excel 工作表中列的数据除法填充新列
- java - ConstrainLayout 中的 TextView 问题
- python - 广度优先搜索低于预期结果的一个索引
- php - 如何使用 php 从多维 JSON 对象中访问值