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

Question

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

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

但我需要 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+"'/>");
          });
        },
        ...

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

https://jsfiddle.net/041xnfzu/

Answer 1

嗯，我认为你在这里混合了各种代码:)

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

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

感谢您的 jsfiddle 示例，我在 codepen 上为您提供了这个纯 vuejs 示例：https ://codepen.io/bergur/pen/vwRJVx

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>

这是代码的演练。

1. 我们创建了一个名为输入的数据属性，即一个数组。
2. 我们创建了一个名为 addInput 的方法，它所做的就是将一个新项目推送到输入数组中
3. 在模板中，我们使用 v-for 循环遍历我们的输入数组，并为我们的输入数据属性中的每个项目渲染一个输入。
4. 然后我们使用 v-model 将每个输入绑定到它在输入数组中的相应位置。

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

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