Question

所以我有2个HTML块，每个包含2个输入字段，在提交表单时，我想从输入中获取所有值，然后从值中创建一个对象... 据我所知，我已经用普通的香草JS做了它，它可以正常工作，但是如果感觉想要触摸DOM有点多，而且非常依赖于特定的DOM攻击，因此我在想那里必须是一个更好的方式，VUE的方式可以这么说，但是我有点坚持如何做这个VUE的方式，这就是为什么在这里发布问题，希望得到一些有用的提示:)

HTML：

methods: {
    createDataObject() {

      let emailValues = document.querySelectorAll('input[type="email"]');

      emailValues.forEach((email) => {
        let name = email.parentNode.parentNode.querySelector('input[type="text"]').value;
          if(email.value !== "" && name !== "") {
            this.dataObj.push({
              email: email.value,
              name
            });
          }
      });

      return JSON.stringify(this.dataObj);

    },
    sendInvites() {
        const objectToSend = this.createDataObject();

        console.log(objectToSend);

        //TODO: Methods to send data to server


    }
}

JS：

PolyData

Answer 1

如果您有静态内容，则可以为每个输入提供数据属性。

data: function() {
   return {
      name1: '',
      email1: '',
      name2: '',
      email2: ''
   }
}

然后在模板中使用它们：

<input type="text" placeholder="Insert name" v-model="name1" />

通过 this.name1

访问方法

Answer 2

尝试一下

<div id="app">
   <h1> Finds </h1>
     <div v-for="find in finds">
       <input name="name[]" v-model="find.name">
       <input name="email[]" v-model="find.email">
     </div>
    <button @click="addFind">
      New Find
    </button>
  <pre>{{ $data | json }}</pre>
</div>

Vue组件

new Vue({
  el: '#app',
  data: {
    finds: []
  },
  methods: {

    addFind: function () {
      this.finds.push({ name: '', email: '' });
    }
    enter code here

  }
});

vue js从输入中获取多个值

2 个答案: