Как динамически добавлять элемент HTML к компоненту в Vue.js

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

Хм, я думаю, что вы смешиваете здесь все виды кода:)

Во-первых, вы не должны использовать jquery внутри VueJS.Я думаю, что ваши настройки немного не в порядке.Вы не должны определять весь объект с функциями и прослушивателями событий в вашем объекте данных vue.

Для этого предназначены компоненты Vue, определяйте методы в свойстве методов, а данные в свойстве данных.

Благодаря вашему примеру с jsfiddle, у меня есть этот чистый пример vuejs для вас на codepen: 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. Мы создаем свойство данных, называемое input, которое является массивом.
2. Мы создаем метод с именем addInput, и все, что нужно сделать, это выдвинуть новыйitem в массиве inputs
3. В шаблоне мы зациклимся с v-for через наш массив входов и отобразим вход для каждого элемента в нашем свойстве inputs.
4. Затем мы используем v-модель дляпривязать каждый вход к соответствующему месту в массиве входов.

Вы можете попробовать изменить значение ввода и увидеть, что шаблон обновляет значение.

Таким образом, input [0] удерживаетсязначение для фиПервый вход, вход [1] содержит значение для второго входа и т. д.

Answer 2

Если вы хотите, чтобы к компоненту добавлялся только один элемент, вы должны использовать v-if https://vuejs.org/v2/guide/conditional.html#v-if

Если вы хотите добавить несколько элементов, например, список задач, вы должны использовать v-for https://vuejs.org/v2/guide/#Conditionals-and-Loops