时间戳

首页 > 解决方案 > 将元素插入模板但没有 v-model

vue.js - 将元素插入模板但没有 v-model

问题描述

使用 vue 我想在单击 createItem 时插入一个元素：

<template>
  <div class="form-row group">
    <h5 class="p-2 col-md-12">item</h5>
      <div class="form-row">
        <div class="form-group mr-2">
          <input type="number" class="form-control" placeholder="Num" v-model="tempitemNum">
        </div>
        <div class="form-group">
          <button class="btn btn-primary btn-sm mt-1" @click="createItem">create</button>
        </div>
      </div>
      <div class="items col-md-12 mt-1 mb-1">
      //create item here
      </div>
  </div>
</template>

我的脚本功能

createItem: function(){
    let items = document.querySelector('.items');
    if(this.itemNum == 0){
        this.itemNum = parseInt(this.tempitemNum);
        for (let i = 0; i < this.itemNum; i++) {
            let item = document.createElement('div');
            item.className = "col-md-12 mb-1 pl-0 pr-0";
            item.innerHTML = `
            <div>
                <span>${i+1}.</span>
                <input type="text" class="form-control">
                <input type="text" class="form-control">
                <input type="text" class="form-control">
            </div>
            `
            items.insertAdjacentElement("beforeend", item);
        }}}

如何在每个输入元素中插入带有 v-model 的项目？

标签： vue.js

解决方案

您可以使用 jsx 来渲染 Dom 元素，现在您可以使用 v-model 来查看：https ://github.com/nickmessing/babel-plugin-jsx-v-model

推荐阅读