jQuery data-table has problem with Vue.js

Question

I am using jQuery data-table in Vue.js in a laravel project. the data has reloaded well in data-table. but the problem is the data retrieve after loading data-table. because, in the first row of data-table says "there is not any data"!! what should i do to use jQuery data-table in Vue.js?

app.js file:

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();
    },
};

the platform.blade.php file:

<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>

tony19 · Accepted Answer · 2022-07-16 00:54:49Z

1

For Reactivity you must initialize platforms in data() section to setup all necessary getters/setters - that is done by Vue under the hood.

And assign a new array reference in this.platforms when updating with API response.

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(...)
    },
},

...

edited Jul 16, 2022 at 0:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 16, 2019 at 9:11

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shokouh Dareshiri Over a year ago

sorry, I forgot to write it here but the problem is not for that!

Sajib Khan Over a year ago

ok, can you try changing this.platforms.push(response.data.data); to this.platforms = [...response.data.data];?

Sajib Khan Over a year ago

can you update index() method also with this.platforms = [ ...response.data.data];? "Cannot find element: #platform' ." means from somewhere #platform is missing

Shokouh Dareshiri Over a year ago

the warning was OK and I solved it. I also change this.platforms = [ ...response.data.data]; in index() and it didnt change.

Narasimhan R · Accepted Answer · 2019-04-16 10:24:25Z

ES6 supports this method...
`

  <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>`

Error in mounted hook: "ReferenceError: axios is not defined" you will face this error.....ESLINT should install and want to define axis method

Collectives™ on Stack Overflow

jQuery data-table has problem with Vue.js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related