如何在Vue.js中将HTML元素动态附加到组件

我是vue.js新手，在此之前，我正在为我的项目使用jquery或js，我正在处理一个项目，该项目要求我在单击按钮时动态附加HTML元素，同时将输入值绑定到模型，类似于：

$(".button").click(function() {
 $("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});

$（“.button”）。单击（函数（）{
$（“#目标”）。追加（“”）；
});

但我需要以Vue.js的方式使用它

这是我的密码：

data() {
    return {
      programmeBanner: [],
      dropzoneOptions: {
        ...
        ...
        init: function () {
          this.on("success", function(file, response) {
            file.previewElement.id = response;

            // this is the part that i want to append the html input into
            // the .dz-preview is the target that i want to append 
            $(".dz-preview[id='"+response+"']").append("<input type='hidden' name='"+fileInputName+"[]' v-model='programmeBanner' class='"+fileInputName+"' value='"+response+"'/>");
          });
        },
        ...

data（）{
返回{
programmeBanner:[]，
dropzoneOptions：{
...
...
init：函数（）{
此.on（“成功”，函数（文件，响应）{
file.previewElement.id=响应；
//这是我想将html输入附加到的部分
//.dz预览是我想要附加的目标
$（“.dz预览[id=”+response+“]”）。追加（“”）；
});
},
...

这是我想要实现的一个示例，它在Jquery中，我需要它在Vue.js中

---

如果只想将一个元素附加到组件，则应使用

v-If

如果要附加多个元素，如todo list，则应使用

v-for

---

嗯，我认为您在这里混合了各种代码：）

首先，您不应该在VueJS中使用jquery。我认为您的设置有点不正确。您不应该在vue数据对象中使用函数和事件侦听器定义整个对象

这就是Vue组件的用途，在methods属性中定义方法，在data属性中定义数据

感谢您的JSFIDLE示例，我在codepen上为您提供了这个纯vuejs示例：

VueJS代码：

new Vue({
  el: '#demo',
  name: 'Adding html',
  data() {
    return {
      inputs: []
    }
  },
  methods: {
    addInput() {
      this.inputs.push(this.inputs.length+1)
    }
  },
  computed: {
    buttonText() {
      return this.showInput ? 'Hide input' : 'Show input'
    }
  }
})

HTML模板

<div id="demo">
  <button @click="addInput">Add input</button>
  <div v-for="(input, index) in inputs">
    <input name="data" v-model="inputs[index]"  />
  </div>
  <p>
    First value: {{ inputs[0] }}<br />
    Second value: {{ inputs[1] }}
  </p>
</div>

添加输入

第一个值：{{输入[0]}}

第二个值：{{输入[1]}

下面是代码的演练

我们创建一个名为inputs的数据属性，即数组

我们创建了一个名为addInput的方法，所做的只是将一个新项推送到inputs数组中

在模板中，我们通过输入数组使用v-for循环，并为输入数据属性中的每个项呈现一个输入

然后，我们使用v-model将每个输入绑定到其在输入数组中的相应位置

您可以尝试更改输入值，并查看模板是否更新了该值

---

因此输入[0]保存第一个输入的值，输入[1]保存第二个输入的值，依此类推。

请告诉我们您尝试了什么。@YomS。我的代码是addedUse vue implementation for dropzone，以使您的生活更轻松。感谢JSFIDLE示例，我用一个工作的vuejs示例更新了我的答案：）嗨，我想在绑定输入的同时将HTML输入附加到目标对于v-model，不要切换它，谢谢您不必切换它，这只是一个如何设置vue应用程序在事件中呈现html的示例。您能否向我解释一下成功事件是什么，它是一个jquery ajax吗？为什么它在数据对象中？当发出该ajax请求时？