У таблицы данных jQuery есть проблема с Vue.js

Question

Я использую таблицу данных jQuery в Vue.js в проекте laravel.данные хорошо загружены в таблицу данных.но проблема заключается в получении данных после загрузки таблицы данных.потому что в первой строке таблицы данных написано "нет никаких данных" !!что я должен сделать, чтобы использовать таблицу данных jQuery в Vue.js?

файл 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

Для Реакционная способность Вы должны инициализировать platforms в секции data(), чтобы настроить все необходимые методы получения / установки - что делается Vue под капотом.

И назначить новую ссылку на массив в this.platforms при обновлении с ответом API.

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 должен установить и захотеть определить метод оси