Question

在VueJS应用程序中，我有一个button和一个table：当我点击该按钮时，我会在表格中动态创建一个新的row。

每个表格行都有4个单元格：我用文本填充任何cell，然后在其中一个中添加select，这样就是最终结果：

<tr>
 <td>text 1</td>
 <td>text 2</td>
 <td>text 3</td>
 <td><select><option ...>...</option>...</select></td>
</tr>

在某些时候，用户（当他完成向此表添加/删除项目时）必须单击一个按钮并将表中包含的数据发送到服务器。

因此，他必须检索文本节点的内容和用户选择的各种选项（或者，我不知道，某些东西存储在当前行的内容中）。

因此，使用Vue，如何检索用户应发送的所有数据？（我现在必须说我将任何行的内容存储为数组中的Object，但我无法弄清楚如何存储用户选择的选项）

Answer 1

请记住将输入和保存的数据分开。我通常使用placholder来做这个伎俩。因此，当我需要发送任何东西时，在这种情况下，一个数组，我可以立即检索它。

const app = new Vue({
  el: '#app',
  data: {
    placeholder: {
      prop1: '',
      prop2: '',
      prop3: '',
      prop4: ''
    },
    items: [
      {
        prop1: 'A',
        prop2: 'B',
        prop3: 'C',
        prop4: 'Yes'
      },
      {
        prop1: 'D',
        prop2: 'E',
        prop3: 'F',
        prop4: 'No'
      },
      {
        prop1: 'G',
        prop2: 'H',
        prop3: 'I',
        prop4: 'Yes'
      }
    ]
  },
  methods: {
    addItem() { 
      this.items.push(this.placeholder)
      this.placeholder = {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: ''
      }
    },
    sendResult() { console.log(this.items) }
  }
})

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="app">
  <div>
    <table>
      <tr>
        <th>Text 1</th>
        <th>Text 2</th>
        <th>Text 3</th>
        <th>Selection</th>
      </tr>
      <tr v-for="item in items">
        <td>{{item.prop1}}</td>
        <td>{{item.prop2}}</td>
        <td>{{item.prop3}}</td>
        <td>
          <select v-model="item.prop4">
            <option disabled value="">Please select one</option>
            <option>Yes</option>
            <option>No</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><input type="text" v-model="placeholder.prop1" /></td>
        <td><input type="text" v-model="placeholder.prop2" /></td>
        <td><input type="text" v-model="placeholder.prop3" /></td>
        <td>
          <select v-model="placeholder.prop4">
            <option disabled value="">Please select one</option>
            <option>Yes</option>
            <option>No</option>
          </select>
        </td>
      </tr>
    </table>
    <button v-on:click="addItem()">Add Item</button>
    <button v-on:click="sendResult()">Send Result</button>
  </div>
</div>

检索用户添加到表

1 个答案: