Question

按下按钮时，我试图将input元素附加到div#teacherForm，然后运行功能pushTeacher。

函数运行时，会将object后面的teachers附加到data的arr中。然后，它在两个inputs后面附加一个v-model，然后引用two-way bind数组中的新teachers对象。

它通过以下代码来实现：

div.innerHTML = `
  <input type="text" placeholder="First name" v-model="this.teachers[${index}].firstName"/>
  <input type="text" placeholder="Last name" v-model="this.teachers[${index}].lastName"/>
`

但是，然后两种方式的数据绑定都不起作用，我可以输入任意数量的内容，但它不会更新teachers[1].firstName等，因为v-model看起来像这样：

<input type="text" placeholder="First name" v-model="this.teachers[1].firstName">

不是这样（有效），因为我是通过非编程方式设置的，而是通过常规方式在vue中编写输入：

<input data-v-1586a421="" type="text" placeholder="Teachers' first name">

完整代码：

<template>
  <div v-if="loaded">
    <div id="teacherForm">
      <input
        type="text"
        placeholder="Teachers' first name"
        v-model="teachers[0].firstName"
        @change="logData"
      />
      <input type="text" placeholder="Teachers' last name" v-model="teachers[0].lastName" />
      <input type="button" value="Push Teacher" @click="pushTeacher()" />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import config from '../../../../config/config'
const log = console.log

export default {
  name: 'Buttons',
  props: ['loaded'],
  data() {
    return {
      name: 'F2',
      inputIndex: 0,
      teachers: [{ firstName: null, lastName: null }],
      students: [],
    }
  },
  methods: {
    logData() {
      log('teachers' + JSON.stringify(this.teachers))
    },
    pushTeacher() {
      ++this.inputIndex
      let index = this.inputIndex

      // Crete Input and push it..
      const div = document.createElement('div')
      div.innerHTML = `
          <input type="text" placeholder="First name" v-model="this.teachers[${index}].firstName"/>
          <input type="text" placeholder="Last name" v-model="this.teachers[${index}].lastName"/>
          `
      document.getElementById('teacherForm').appendChild(div)

      this.teachers.push({ firstName: null, lastName: null })
    },
  },
}
</script>

Answer 1

您可以改用v-for。

例如

new Vue({
  el: "#app",
  data: {
    todos: [{
        id: 1,
        text: "Learn JavaScript",
        done: false,
        model: 'javascript'
      },
      {
        id: 2,
        text: "Learn Vue",
        model: 'reactjs',
        done: false
      },
      {
        id: 3,
        text: "Play around in JSFiddle",
        done: true,
        model: 'vue'
      },
    ]
  },
  methods: {
    toggle: function(todo) {
      todo.done = !todo.done
    },
    showValues() {
      console.log(this.todos);
    },
    addField() {
      this.todos.push({
        model: 'test'
      });
      this.$forceUpdate();
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="addField">
    Add Field
  </button>
  <ul>
    <li v-for="(todo, index) in todos">
      <input v-model="todo.model">
    </li>
  </ul>

  <button @click="showValues">
    Show Values
  </button>
</div>

Answer 2

只需更新当前索引，因此v-model最近添加了teacher。

v-model="teachers[index].firstName"

new Vue({
  el: '#app',
  data() {
    return {
      index: 0,
      teachers: [
        {
          firstName: '',
          lastName: '',
        },
      ],
      students: [],
    }
  },
  methods: {
    pushTeacher() {
      this.index++

      this.teachers.push({
        firstName: '',
        lastName: '',
      })
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div>
      <input type="text" placeholder="Teachers' first name" v-model="teachers[index].firstName" />
      <input type="text" placeholder="Teachers' last name" v-model="teachers[index].lastName" />
      <input type="button" value="Push Teacher" @click="pushTeacher" />
    </div>
    <ul>
      <li v-for="(teacher, index) in teachers" :key="index">{{ teacher.firstName}} {{ teacher.lastName }}</li>
    </ul>
  </div>
</div>

VueJS-动态将带有v-model属性的appendChild分配给div？

2 个答案: