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

如果只希望将一个元素附加到组件，则应使用v-if https://vuejs.org/v2/guide/conditional.html#v-if

如果要附加多个元素（例如待办事项列表），则应使用v-for https://vuejs.org/v2/guide/#Conditionals-and-Loops

Answer 2

您可以使用v-model代替value进行输入。

使用类似

<input type="hidden" v-model="input"/>
<button @click="changeInput">
...
<script>

  export default {
    name: 'App',

    data () {
      return {
          input: '',
         }
       },
    methods: {
       changeInput(){
           this.input = 1;
       }
    }
...

通过docs。 GL

Answer 3

嗯，我想你在这里混各种代码：）

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

这就是Vue组件的用途，在method属性中定义方法，并在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>

这是代码的演练。

我们创建一个称为输入的数据属性，它是一个数组。
我们创建了一个名为addInput的方法，其作用是将一个新项目推送到输入数组中
在模板中，我们通过input数组使用v-for循环，并在inputs数据属性中为每个项目呈现一个输入。
然后，我们使用v模型将每个输入绑定到其在输入数组中的对应位置。

您可以尝试更改输入值，并查看模板会更新该值。

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

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

3 个答案: