Vuejs2 Vue合成API在v-for内不反应？

我正在使用Vue 2和Vuetify（而不是Vue 3）创建表单生成器网站。在我发现出问题之前，我一直进展得很顺利。所以，情况是这样的。我使用下面的代码呈现了一个反应数组中的文本字段（输入）

// ... 其他一些不相关的代码
mdi关闭
// ... 其他一些不相关的代码
从“@vue/composition api”导入{reactive，ref，watch}
从“@/composables/useInquiry”导入useInquiry
从“@/components/clickables/TextButton.vue”导入TextButton
从“@/components/inputs/TextField.vue”导入TextField
导出默认值{
组件：{TextField，TextButton}，
设置（）{
const{answer，addOption，deleteOption}=useInquiry（）
返回{answer，addOption，deleteOption}
}
}

这是我的useInquiry可组合逻辑

从'@vue/compositionapi'导入{reactive，watch，se}
从“@/helpers/ID”导入ID
导出默认值（）=>{
常数回答=反应性({
id:id（），//这实际上只是生成一个id
类型：2，
选项：[''，]
})
常量addOption=（）=>{
回答。选项。按（“”）
}
const deleteOption=at=>{
const temp=answer.options.filter（（u，i）=>i！==at）
答案.选项=[]
答案：选项=temp
};
返回{answer，addOption，deleteOption}
}

最后，这是我的TextField.vue

从“@vue/compositionapi”导入{ref，watch}
导出默认值{
型号：{
道具：“价值”，
事件：“更改”
},
道具：{
标签：字符串，
值：字符串，
密码：Boolean，
下划线：布尔，
大：布尔，
hideLabel:布尔型
},
设置（道具、上下文）{
常量inputValue=ref（属性值）
观察（输入值，（当前输入，当前输入）=>{
emit（'change'，currInput）
})
返回{inputValue}
}
}

---

问题是，每次单击delete按钮时，被删除的输入始终是数组中的最后一个输入，即使我没有单击最后一个。我试图通过使用Vue的合成观察方法来记录我的反应数组。显然，数据已正确更新。问题是v-model看起来不同步，最后一个输入总是被删除的。

在我看来不错……除了

TextField.vue

问题出现在

TextField.vue

中。您在

TextField.vue的
设置中实际执行的操作是（vue 2 API）：

data（）{
返回{
inputValue:this.value
}
}

…这是值为
value
prop的
inputValue
数据成员的一次初始化。因此，当删除其中一个
选项
并重用组件时（因为Vue一直都是这样做的-尤其是在
：key
中使用索引时），
inputValue
不会更新为
value
属性的新值

您根本不需要
inputValue
或
model
选项，只需将其删除并使用此模板即可：



请注意，在我的示例中，我使用的是
$event.target.value
而不是
$event
，因为我使用的是本机
元素，而不是Vuetify的自定义组件输入

工作示例。。。
const{
反应性，
裁判，
看
}=VueCompositionAPI
Vue.use（VueCompositionAPI）
常数BrokenInput={
型号：{
道具：“价值”，
事件：“更改”
},
道具：{
值：字符串，
},
设置（道具、上下文）{
常量inputValue=ref（属性值）
观察（输入值，（当前输入，当前输入）=>{
emit（'change'，currInput）
})
返回{
输入值
}
},
模板：``
}
常数FixedInput={
道具：{
值：字符串，
},
模板：``
}
const useInquiry=（）=>{
常数回答=反应性({
id:1，
类型：2，
选项：['1'，'2'，'3'，'4'，'5']
})
常量addOption=（）=>{
回答。选项。按（“”）
}
const deleteOption=at=>{
const temp=answer.options.filter（（u，i）=>i！==at）
答案：选项=temp
};
返回{
答复,，
添加选项，
删除选项
}
}
const app=新的Vue({
组件：{“断开的输入”：断开的输入，'fixed input'：FixedInput}，
设置（）{
返回useInquiry（）
},
})
app.$mount（“#app”）

选项
中断输入
模型
固定输入
选项{{i}}：
{{answer.options[i]}
删除选项
添加选项
我想我发现了真正的问题…检查我的更新答案…谢谢你的答案。我已经看过你的答案，你说的绝对合乎逻辑。这是我的错误，因为我不熟悉Vue的合成API。谢谢。这对我真的很有帮助。