Styjun

Passing lines from the text file of a list of files to or as arguments

Sextortion with actual password not found in leaks

Why are angular mometum and angular velocity not necessarily parallel, but linear momentum and linear velocity are always parallel?

Why do websites not use the HaveIBeenPwned API to warn users about exposed passwords?

Why no ";" after "do" in sh loops?

What do I do when a student working in my lab "ghosts" me?

Closet Wall, is it Load Bearing?

Moving files accidentally to an not existing directory erases files?

Area of parallelogram = Area of square. Shear transform

How do professional electronic musicians/sound engineers combat listening fatigue?

How can I prevent corporations from growing their own workforce?

What is the life span of a Flerken?

Using "Kollege" as "university friend"?

What are the exact meanings of roll, pitch and yaw?

Very basic singly linked list

Why is a dedicated QA team member necessary?

Is it normal practice to screen share with a client?

What is the difference between $path and $PATH (lowercase versus uppercase) with zsh?

How were the LM astronauts supported during the moon landing and ascent? What were the max G's on them during these phases?

Is an easily guessed plot twist a good plot twist?

Do I need another Schengen Visa

401(k) investment after being fired. Do I own it?

What was the rationale behind 36 bit computer architectures?

High income, sudden windfall

VueJS/VueX : display table when store state has been populated

How to clear state in vuex store?Cannot get object’s property in state before render using Vue + VuexVuex store state is undefinedVueJS/Vuex Initial stateVuex state on page refreshvuejs 2 how to watch store values from vuexVueJs: Form handling with Vuex and inputs generated with an APIDynamically populate Vuex stateVuex mapState set StateVue.js Vuex how to use correctly the store.watch() method correctly?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I'm trying to develop a single file component where i would like to fetch user cars from backend and display the all loaded cars in a table.

What is the best way to handle that ?

For the moment, i call a store action (getUserCars) from the created() hook, and then I try to listen any change on a state property of my store using a watch to be able to build my table in UI. But it doesn't work yet..

Could you please help me?

<script>
import mapActions, mapGetters from "vuex";

export default 
 created: function() 
 console.log("created() - called");
 this.getUserCars();
 ,
 mounted: function() 
 console.log("mounted() - called");
 ,
 destroyed: function() 
 console.log("destroyed() - called");
 ,
 watch: 
 userSites(newValue, oldValue) 
 console.log(`watch() Updating from $oldValue to $newValue`);

 const options = 
 data: type: "local", source: this.userCars(), pageSize: 5,
 layout: theme: "default", class: "", scroll: !1, footer: !1,
 sortable: !0,
 pagination: !0,
 columns: [
 field: "name", title: "Name",
 field: "createdAt", title: "Created At"
 ]
 ;
 $('#m_datatable').mDatatable(options);

 ,
 ,
 computed: 

 ,
 methods: 
 ...mapGetters(["userCars"]),
 ...mapActions(["getUserCars"]),
 
;
</script>

vue.js vuejs2 vue-component vuex

share|improve this question

asked Mar 26 at 16:09

wawanopouloswawanopoulos

3,2341919 gold badges6868 silver badges121121 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I think you don't need watches. Did you try it with computed properties?
  
  – Matheus Valenza
  Mar 26 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By default, Store state are also reactive. If state changes, it will update the UI. But action has to be inside computed properties.
  
  – Varit J Patel
  Mar 26 at 16:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @varit05 Ok, so where I need to put the code responsible to build the datatable ?
  
  – wawanopoulos
  Mar 26 at 16:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is your UI directly interacting with Database, without any REST Api/Service?
  
  – Varit J Patel
  Mar 26 at 16:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No, first i get the list of cars using a REST API call and store them using a mutation in a state property. Then, i would like to automatically get the list of cars just loaded to create my datatable using the javascript code that i put in my description
  
  – wawanopoulos
  Mar 26 at 16:34
  

  
  
  
  

add a comment | 

0

I'm trying to develop a single file component where i would like to fetch user cars from backend and display the all loaded cars in a table.

What is the best way to handle that ?

For the moment, i call a store action (getUserCars) from the created() hook, and then I try to listen any change on a state property of my store using a watch to be able to build my table in UI. But it doesn't work yet..

Could you please help me?

<script>
import mapActions, mapGetters from "vuex";

export default 
 created: function() 
 console.log("created() - called");
 this.getUserCars();
 ,
 mounted: function() 
 console.log("mounted() - called");
 ,
 destroyed: function() 
 console.log("destroyed() - called");
 ,
 watch: 
 userSites(newValue, oldValue) 
 console.log(`watch() Updating from $oldValue to $newValue`);

 const options = 
 data: type: "local", source: this.userCars(), pageSize: 5,
 layout: theme: "default", class: "", scroll: !1, footer: !1,
 sortable: !0,
 pagination: !0,
 columns: [
 field: "name", title: "Name",
 field: "createdAt", title: "Created At"
 ]
 ;
 $('#m_datatable').mDatatable(options);

 ,
 ,
 computed: 

 ,
 methods: 
 ...mapGetters(["userCars"]),
 ...mapActions(["getUserCars"]),
 
;
</script>

vue.js vuejs2 vue-component vuex

share|improve this question

asked Mar 26 at 16:09

wawanopouloswawanopoulos

3,2341919 gold badges6868 silver badges121121 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I think you don't need watches. Did you try it with computed properties?
  
  – Matheus Valenza
  Mar 26 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  By default, Store state are also reactive. If state changes, it will update the UI. But action has to be inside computed properties.
  
  – Varit J Patel
  Mar 26 at 16:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @varit05 Ok, so where I need to put the code responsible to build the datatable ?
  
  – wawanopoulos
  Mar 26 at 16:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is your UI directly interacting with Database, without any REST Api/Service?
  
  – Varit J Patel
  Mar 26 at 16:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  No, first i get the list of cars using a REST API call and store them using a mutation in a state property. Then, i would like to automatically get the list of cars just loaded to create my datatable using the javascript code that i put in my description
  
  – wawanopoulos
  Mar 26 at 16:34
  

  
  
  
  

add a comment | 

I'm trying to develop a single file component where i would like to fetch user cars from backend and display the all loaded cars in a table.

What is the best way to handle that ?

For the moment, i call a store action (getUserCars) from the created() hook, and then I try to listen any change on a state property of my store using a watch to be able to build my table in UI. But it doesn't work yet..

Could you please help me?

<script>
import mapActions, mapGetters from "vuex";

export default 
 created: function() 
 console.log("created() - called");
 this.getUserCars();
 ,
 mounted: function() 
 console.log("mounted() - called");
 ,
 destroyed: function() 
 console.log("destroyed() - called");
 ,
 watch: 
 userSites(newValue, oldValue) 
 console.log(`watch() Updating from $oldValue to $newValue`);

 const options = 
 data: type: "local", source: this.userCars(), pageSize: 5,
 layout: theme: "default", class: "", scroll: !1, footer: !1,
 sortable: !0,
 pagination: !0,
 columns: [
 field: "name", title: "Name",
 field: "createdAt", title: "Created At"
 ]
 ;
 $('#m_datatable').mDatatable(options);

 ,
 ,
 computed: 

 ,
 methods: 
 ...mapGetters(["userCars"]),
 ...mapActions(["getUserCars"]),
 
;
</script>

vue.js vuejs2 vue-component vuex

share|improve this question

asked Mar 26 at 16:09

wawanopouloswawanopoulos

3,2341919 gold badges6868 silver badges121121 bronze badges

<script>
import mapActions, mapGetters from "vuex";

export default 
 created: function() 
 console.log("created() - called");
 this.getUserCars();
 ,
 mounted: function() 
 console.log("mounted() - called");
 ,
 destroyed: function() 
 console.log("destroyed() - called");
 ,
 watch: 
 userSites(newValue, oldValue) 
 console.log(`watch() Updating from $oldValue to $newValue`);

 const options = 
 data: type: "local", source: this.userCars(), pageSize: 5,
 layout: theme: "default", class: "", scroll: !1, footer: !1,
 sortable: !0,
 pagination: !0,
 columns: [
 field: "name", title: "Name",
 field: "createdAt", title: "Created At"
 ]
 ;
 $('#m_datatable').mDatatable(options);

 ,
 ,
 computed: 

 ,
 methods: 
 ...mapGetters(["userCars"]),
 ...mapActions(["getUserCars"]),
 
;
</script>

share|improve this question

asked Mar 26 at 16:09

wawanopouloswawanopoulos

3,2341919 gold badges6868 silver badges121121 bronze badges

share|improve this question

asked Mar 26 at 16:09

wawanopouloswawanopoulos

3,2341919 gold badges6868 silver badges121121 bronze badges

asked Mar 26 at 16:09

wawanopouloswawanopoulos

3,2341919 gold badges6868 silver badges121121 bronze badges

asked Mar 26 at 16:09

wawanopouloswawanopoulos

3,2341919 gold badges6868 silver badges121121 bronze badges

1 Answer
1

active

oldest

votes

1

If your getUserCars() action in your store hydrates the state with the data, then you can have a getter like the userCars one I can see in your code. You just have to move the mapGetters helper from methods to computed.

Then you can access it in the template and do whatever you want.

computed: 
 ...mapGetters(["userCars"])
,
methods: 
 ...mapActions(["getUserCars"])

share|improve this answer

answered Mar 26 at 17:04

qwsdqwsd

11911 silver badge33 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55361606%2fvuejs-vuex-display-table-when-store-state-has-been-populated%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

If your getUserCars() action in your store hydrates the state with the data, then you can have a getter like the userCars one I can see in your code. You just have to move the mapGetters helper from methods to computed.

Then you can access it in the template and do whatever you want.

computed: 
 ...mapGetters(["userCars"])
,
methods: 
 ...mapActions(["getUserCars"])

share|improve this answer

answered Mar 26 at 17:04

qwsdqwsd

11911 silver badge33 bronze badges

add a comment | 

1

If your getUserCars() action in your store hydrates the state with the data, then you can have a getter like the userCars one I can see in your code. You just have to move the mapGetters helper from methods to computed.

Then you can access it in the template and do whatever you want.

computed: 
 ...mapGetters(["userCars"])
,
methods: 
 ...mapActions(["getUserCars"])

share|improve this answer

answered Mar 26 at 17:04

qwsdqwsd

11911 silver badge33 bronze badges

add a comment | 

If your getUserCars() action in your store hydrates the state with the data, then you can have a getter like the userCars one I can see in your code. You just have to move the mapGetters helper from methods to computed.

Then you can access it in the template and do whatever you want.

computed: 
 ...mapGetters(["userCars"])
,
methods: 
 ...mapActions(["getUserCars"])

share|improve this answer

answered Mar 26 at 17:04

qwsdqwsd

11911 silver badge33 bronze badges

computed: 
 ...mapGetters(["userCars"])
,
methods: 
 ...mapActions(["getUserCars"])

share|improve this answer

answered Mar 26 at 17:04

qwsdqwsd

11911 silver badge33 bronze badges

answered Mar 26 at 17:04

qwsdqwsd

11911 silver badge33 bronze badges

answered Mar 26 at 17:04

qwsdqwsd

11911 silver badge33 bronze badges