Question

我正在学习vue.js，因此问题似乎很基本。提前致歉。我有一个包含几行的表，其中包含一个复选框和一个文本。我想知道如何从仅选中复选框的行中获取数据

我正在使用axios发送该信息，但到目前为止我还没有走运。请参阅下面的代码：

       <table class="table table-hover">
         <thead>
           <tr>
             <th scope="col">Status</th>
             <th scope="col">Keyword</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="item in msg">
           <td>
              <input type="checkbox" id="defaultCheck" name="example2">
              <label for="defaultCheck"></label>
           </td>
             <td>{{item.Keyword}}</td>
           </tr>
         </tbody>
       </table>
       <button v-on:click="getFormValues">Submit</button>
       </form>
     Output: {{ output }}

那么我有这个：

export default {
  name: 'Keywords',
  data() {
    return {
      output: '',
    };
 methods: {
    getFormValues () {
      this.output = this.$refs.my_input.value
    },
  }

按钮触发事件，但似乎未发送任何数据。如何发送表格中已选择的项目数组？

请问有人有我该怎么做的例子吗？

谢谢

Answer 1

您可以为此使用v-model

<tr v-for="item in msg">
  <td>
    <input type="checkbox" id="defaultCheck" name="example2" v-model="output" :value="item">
    <label for="defaultCheck"></label>
  </td>
</tr>

export default {
  name: 'Keywords',
  data() {
    return {
      output: [],
    };
 methods: {
    getFormValues () {
      console.log(this.output)
    },
  }
}

VueJS：如何使用复选框从表中检索信息

1 个答案: