1

在我的 Vue.js 前端应用程序中，我想创建将 json 数据发布到 REST API 的表单。该表单的一部分是我从 API 获取 json 数据，这是可能添加组的列表。

Vue.js 代码看起来像

<script>
  export default {
    data () {
      return {
        line: {
          name: '',
          buttons: [{
            name: '',
            state: false,
            is_reported: '',
            assignmentGroups: [{
              name: ''
            }]
          }]
        },
        assignmentGroupsList: []
      }
    },
    methods: {
      addButton () {
        this.line.buttons.push({
          name: '',
          state: false,
          is_reported: ''
        })
      },
      deleteButton (index) {
        this.line.buttons.splice(index, 1)
      },
      saveLine () {
//        this.$http.post('http://127.0.0.1:8001/api/line')
//          .then(response => response.json())
//          .then(result => this.lines = result)
        console.log(JSON.stringify(this.line))

      },
      fetchAssignmentGroups() {
        this.$http.get('http://127.0.0.1:8001/api/agroup')
          .then(response => response.json())
          .then(result => this.assignmentGroupsList = result)
          .then(result => console.log(result))
      }
    },
    created: function () {
      this.fetchAssignmentGroups();
      //this.fetchLines();
    }
  }
</script>

和模板

<template>
  <div>
    <div id="page-wrapper">
      <div class="row">
        <div class="col-lg-12">
          <div class="form">
            <div class="form-group">
              <label for="name">Line name</label>
              <input v-model="line.name" class="form-control" type="text" id="name" name="name"/>
            </div>
            <label for="">Buttons</label>

            <div class="" v-for="(button, index ) in line.buttons">

              <div class="form-group">
                <label for="btn">Przycisk nr {{ index }}</label>
                <input v-model="button.name" class="form-control col-lg-3" type="text" id="btn" name="btn" />

                <input type="radio" id="'one' + index" :value="false" v-model="button.is_reported">
                <label for="one">No</label>
                <input type="radio" id="'two' + index" :value="true" v-model="button.is_reported">
                <label for="two">Yes</label>
              </div>

              <div class="form-group">
                <div class="" v-for="(agroup, index2) in assignmentGroupsList">

                    <input type="checkbox" :name="'agroup'+index2"  :value=" agroup.name " v-model="button.assignmentGroups">
                    <label for="">{{ agroup.name }}</label>
                  </div>
              </div>

              <button class="btn btn-danger"
                      @click="deleteButton(index)">
                Remove
              </button>
            </div>

            <div class="form-group">
              <button class="btn btn-success"
                      @click="addButton">
                Add
              </button>
              <button class="btn btn-primary"
                      @click="saveLine">
                Save
              </button>
            </div>
          </div>
          <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
      </div>
    </div>
  </div>
</template>

在浏览器中，我可以在每个添加的按钮中正确看到组列表，但仅此而已。它没有得到数据。

4

0 回答 0