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

【问题标题】：How to dynamically append HTML element to component in Vue.js如何动态地将 HTML 元素附加到 Vue.js 中的组件
【发布时间】：2023-03-05 01:44:02
【问题描述】：

我是 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/

【问题讨论】：

你能告诉我们你尝试了什么吗？
@YomS。我的代码已添加
使用 vue 实现 dropzone 让您的生活更轻松。 github.com/rowanwins/vue-dropzone
感谢 jsfiddle 示例，我已经用一个有效的 vuejs 示例更新了我的答案 :)

标签： html vue.js append

【解决方案1】：

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

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

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

感谢您的 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>

这是代码的演练。

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

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

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

【讨论】：

嗨，我想将 HTML 输入附加到目标，同时将输入绑定到 v-model，而不是切换它，谢谢
您不必切换它，这只是如何设置 vue 应用程序以在事件上呈现 html 的示例。
你能解释一下成功事件是什么，它是一个 jquery ajax 吗？为什么它在数据对象中？何时触发该 ajax 请求？

【解决方案2】：

如果您只想将一个元素附加到组件，那么您应该使用v-if https://vuejs.org/v2/guide/conditional.html#v-if

如果你想追加多个元素，比如待办事项列表，你应该使用v-for https://vuejs.org/v2/guide/#Conditionals-and-Loops

【讨论】：