VueJS-如何使用基于可变数据的模型创建动态输入字段

Question

我有一个Vue组件，它根据API获取的数据创建大量输入。我通过一个方法运行JSON中的值，如果某个条件匹配，该方法会将该值转换为输入字段。以下是我的组件外观：

<template>
<div>
<div v-for="(val, index) in data">
<span>{{val.key}}</span>
<span :inner-html.prop="checkForEdit(val)"></span>
</div>
<b-button @click="submitData">Save</b-button>
<div>
</template>
export default {
name: "SomeComp",
data() {
return {
dynamicVars: {}
}
},
methods: {
...mapActions("api", ["getData"]),
checkForEdit(value) {
if(!value) return '';
if(value.mustEdit) {
this.dynamicVars[value.key] = '';
return '<input type="text" value= "'+ value.text +'" :model='+ this.dynamicVars[value.key]+'>';
} else {
return value.text;
}
},
submitData() {
console.log(this.dynamicVars); //Only the key is present, no value updated
}
},
created() {
this.getData();
},
computed: {
...mapState("api", ["data"]),
}
};

数据如下：

[
{key: 'name', text: 'John', mustEdit: false},
{key: 'age', text: '100', mustEdit: true}
]

这个数据可以是任何东西，字段不是固定的，只有格式是固定的。所以我想创建动态vars对象，发送到保存它的API。

现在它只在dynamicVars中创建变量，但当我更改字段值时，它似乎并没有真正做出反应。

Answer 1

innerHTML对Vue模板、绑定和反应性一无所知-如果设置domNode.innerHTML = '<input v-model="variable">';，浏览器将忽略属性v-model，因为它不是标准的HTML5属性。

你需要改变你的思维模式，而不是用命令式的方式思考，试着用宣言式的方式来思考——只需在你的模板中写下你想做的事情，Vue就会为你创造奇迹。我们有Vue为我们做事，而不是用旧的jQuery风格编写代码，这真是一件幸事。

<template>
<div>
<div v-for="(val, index) in data" :key="index">
<label :for="'input_' + index">{{val.key}}</label>
<input v-if="val.mustEdit" :id="'input_' + index" :model='val.text'>
<span v-else>{{ val.text }}</span>
</div>
<b-button @click="submitData">Save</b-button>
<div>
</template>
export default {
name: "SomeComp",
methods: {
...mapActions("api", ["getData"]),
submitData() {
console.log(this.data);
}
},
created() {
this.getData();
},
computed: {
...mapState("api", ["data"]),
}
};