Question

我在laravel项目的Vue.js中使用jQuery数据表。数据已重新加载到数据表中。但是问题是加载数据表后检索数据。因为，在数据表的第一行中显示“没有任何数据”！我应该怎么做才能在Vue.js中使用jQuery数据表？

app.js文件：

export const platform= {
    el:'#platform',

    data: {
        name:'',
        platforms: [],
    },

    methods: {
        index:function() {
            axios.get('/api/platforms', {
                headers: headers
            }).then(response => {
                this.platforms = response.data.data;
                this.dataTable.row.add([
                    this.platforms
                ]);
            }).catch(error => {
                alert(error.response.data.message);
            })
        },

        store:function() {
            axios.post('/api/platforms', {
                params: {
                    name: this.name
                }
            }, {
                headers: headers
            }).then(response => {
                this.platforms.push(response.data.data);
                alert(response.data.message);
            }).catch(error => {
                if (error.response.status === 422) {
                    this.message = error.response.data.data['validation-errors']['params.name'];
                } else {
                    this.message = error.response.data.message;
                }
            })
        },
    },

    mounted:function() {
        this.index();
    },
};

platform.blade.php文件：

<section class="content" id="platform">
  <div class="form-group">
      <input type="text" v-model="name">
   </div>
   <button class="btn btn-raised" @click.prevent="store()">save</button>

   <div class="row">
     <table class="table table-bordered table-striped table-hover dataTable">
       <thead>
         <tr>
           <th>platform name</th>
         </tr>
         </thead>
          <tbody>
            <tr v-for="(platform, index) in platforms">
             <td>@{{ platform.name }}</td>
            </tr>
          </tbody>
      </table>
   </div>
</section>

Answer 1

对于Reactivity，您必须在platforms部分中初始化data()来设置所有必要的吸气剂/吸气剂-这是由Vue在幕后完成的。

并在使用API响应进行更新时在this.platforms中分配一个新的数组引用。

data: {
    name:'',
    platforms: []
},

...
index:function() {
        axios.get('/api/platforms', {
            ...
        }).then(response => {

            // assign a new array reference in 'this.platforms'
            this.platforms = [ ...response.data.data];
            ...
        }).catch(...)
    },

...
store:function() {
        axios.post('/api/platforms', 
          ...
          ...
        ).then(response => {

           // assign a new array reference in 'this.platforms'
           this.platforms = [...response.data.data];
            alert(response.data.message);
        }).catch(...)
    },
},

...

Answer 2

ES6支持此方法...
`

  <div class="row">
   <table class="table table-bordered table-striped table-hover dataTable">
    <thead>
     <tr>
       <th>platform name</th>
     </tr>
     </thead>
      <tbody>
        <tr v-for="(platform, index) in platforms">
         <td>@{{ platform.name }}</td>
        </tr>
      </tbody>
   </table>
  </div>
 </section>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
 name: "App",
 data(){
   return{
      name:'',
      platforms: [],
   }
 },
 methods: {
    index:function() {
        axios.get('/api/platforms', {
            headers: headers
        }).then(response => {
            this.platforms = response.data.data;
            this.dataTable.row.add([
                this.platforms
            ]);
        }).catch(error => {
            alert(error.response.data.message);
        })
    },

    store:function() {
        axios.post('/api/platforms', {
            params: {
                name: this.name
            }
        }, {
            headers: headers
        }).then(response => {
            this.platforms.push(response.data.data);
            alert(response.data.message);
        }).catch(error => {
            if (error.response.status === 422) {
                this.message = error.response.data.data['validation-errors'] 
                 ['params.name'];
            } else {
                this.message = error.response.data.message;
            }
        })
    },
},
mounted:function() {
    this.index();
},
components: {
  HelloWorld
}
};
</script>`

挂接钩中的错误：“ ReferenceError：未定义axios”，您将遇到此错误..... ESLINT应该安装并要定义轴方法

jQuery数据表Vue.js有问题

2 个答案: