在动态创建的DOM元素上使用响应性属性

Question

我正在玩Vue 2，我试图在mounted钩子中创建DOM元素，如下所示:

<div id="app">
<div id="container">
<label for="static_name">Existing field</label>
<input type="text"
id="static_name"
v-model="value">
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
value: 'Example value'
},
mounted: function() {
const container = document.getElementById('container')
const label = document.createElement('label') 
const input = document.createElement('input')

label.setAttribute("for", "name")
label.innerHTML = "Added field"
input.setAttribute("type", "text")
input.setAttribute("id", "name")
input.setAttribute("v-model", "value")  // I would use reactivity here
container.append(label)
container.append(input)
}
})
</script>

JSFiddle例子

已添加字段"在mounted钩子中创建的输入字段复制"现有字段";在html代码，但v-model指令不工作在前者(而它的工作在html代码中定义的领域)。我认为这是因为响应性数据是在生命周期的创建阶段处理的。

问题是:是否有一种方法(解决方案)在添加了createElementAPI的DOM元素中使用响应性数据，如在示例中?

我正在使用Vue 2，但如果需要的话，我渴望切换到Vue 3。

Answer 1

使用vue 2.7，或vue 2.6与组合api，或vue 3然后添加一个反应值或ref值。

const model = ref('hello')
setAttribute('v-model', model)
watch(model, value=>{
})

您需要使用model.value在监视器或模板外部访问您的值。

动态创建一个新的Vue组件可能更有意义。