Question

我有一个带有v模型的输入文本字段，每当有人点击“添加”按钮时，另一个输入文本会被添加到DOM中并附加相同的v模型。我以为我会得到一个v模型值的数组，但它只获得第一个v模型输入的值：

<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>

我附加到dom的html由addReference方法触发：

addReference: function(e) {
  e.preventDefault();
  console.log(this.references);
  var inputEl = '<input v-model="references" type="text">';
  $('#references').append(inputEl);
}

这是Vuejs无法做到的事情吗？是否有一种不同的方法从动态dom元素中收集Vuejs的值？

new Vue({
  el: "#app",
  data: {
    references: "text"
  },
  methods: {
    addReference: function(e) {
      e.preventDefault();
      console.log(this.references);
      var inputEl = '<input v-model="references" type="text">';
      $('#references').append(inputEl);
    }
  }
})

input {
  display: block;
  margin: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>

Answer 1

你在思考DOM，这是一个很难打破的习惯。 Vue建议您先处理数据。

在您确切的情况下很难说明，但我可能会使用v-for并制作一个finds数组来推送，因为我需要更多。

以下是我设置实例的方法：

new Vue({
  el: '#app',
  data: {
    finds: []
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: '' });
    }
  }
});

以下是我设置模板的方法：

<div id="app">
  <h1>Finds</h1>
  <div v-for="find in finds">
    <input v-model="find.value">
  </div>
  <button @click="addFind">
    New Find
  </button>
</div>

以上是上述演示：https://jsfiddle.net/a5t24gm3/1/

Answer 2

如果您在vue2中询问如何操作并选择插入和删除它，请查看js fiddle

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>

Answer 3

以上是https://jsfiddle.net/sajadweb/mjnyLm0q/11

的演示

＆＃13;

new Vue({
  el: '#app',
  data: {
    users: [{ name: 'sajadweb',email:'sajadweb@outlook.com' }] 
  },
  methods: {
    addUser: function () {
      this.users.push({ name: '',email:'' });
    },
    deleteUser: function (index) {
      console.log(index);
      console.log(this.finds);
      this.users.splice(index, 1);
      if(index===0)
      this.addUser()
    }
  }
});

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <h1>Add user</h1>
  <div v-for="(user, index) in users">
    <input v-model="user.name">
    <input v-model="user.email">
    <button @click="deleteUser(index)">
      delete
    </button>
  </div>
  
  <button @click="addUser">
    New User
  </button>
  
  <pre>{{ $data }}</pre>
</div>

＆＃13;

Vuejs：多输入的v模型数组

3 个答案: