I want to print the data in the inputs in the image to the screen via node js, how can I do this?
You could use a combination of an Array and an v-for statement
Basically:
//The UI
<ul>
<li v-for="(item, key) in array" v-bind:key="key">
//Here you can use now every item in the Array like this for example
<span>{{ item.name }}</span>
</li>
</ul>
//The code
export default {
data() {
return { array: [] };
},
methods: {
apiDataFunction() {
axios
.post('xxx') //Or whatever you have
.then((res) => {
this.array.push(res.data);
});
}
}
};
If you could give some more information I could help more.
For example, how the data looks that you retrieve with axios etc.
I didn't test this code personally so it may be, that you would need to pack this array into an computed statement
Related
I am trying to slice an array of items in Vue
here is my code
<template>
<div v-for="item in Items" :item="item" :key="item.id">{{ item.name }}</div>
</template>
<page-query>
query {
count
items {
id
name
}
}
</page-query>
<script>
export default {
props: {
items: Array,
}
computed: {
Items() {
return this.items.slice(0, 4);
},
}
}
</script>
As you can see I am slicing the array by 4.
In my API data I have a "count" object that returns a number I need to use to slice the items but I cant figure out a way how. Could you please give me a hint how to use count data instead of hardcoded number 4?
Using limit should help you
<page-query>
query {
count
items(limit: 4) {
id
name
}
}
</page-query>
I need to put out a list of users based on whether they are active or not. I know I can separate the v-for and the v-if in nested divs but I can't because of the construct of the html. Also I need this for pagination purposes.
So I have my API containing thousands of users (some active true and same active false)
My template looks like this for the active ones:
<div v-if="filterformData.filterby === 'Active Operators'">
<div v-for="(user, key) in operators" :key="key" v-if="user.active">
User Name: {{user.name}}
User ID: {{user.id}}
...
</div>
</div>
Note: the first v-if it's checking for a dropdown select option of name Active Operators. That's in my data object.
My script relevant lines look like this
computed: {
...mapGetters("users", ["operators"])
},
methods: {
...mapActions("users", ["getUsers"])
}
created() {
this.getUsers();
}
My store relevant lines look like this:
import { axiosInstance } from "boot/axios";
export default {
namespaced: true,
state: {
operators: []
},
getters: {
operators: state => {
return state.operators;
}
},
actions: {
async getUsers({ commit }) {
const response = await axiosInstance.get("operator");
commit("setUsers", response.data.data);
}
},
mutations: {
setUsers: (state, operators) => (state.operators = operators)
}
};
Again, I'd like to contain the active users in a computed property that I can use for the loop. And eventually, I will be making another one for inactive users as well
Thanks
Just filter the active users in a computed property like this
computed: {
...
activeUsers() {
return this.operators.filter(user => user.active)
}
},
and change the v-for directive to this
<div v-for="(user, key) in activeUsers" :key="key">
and it should work without v-for and v-if on the same element.
I am using vuex to save a tree structure in the state property.
The data is fetched with an ajax call.
The problem is that the page manages to render before the variable I have in the state property manages to populate.
i.e
// sth.ts file
state: {
map: {}
},
...
actions: {
getData({ commit }){
axios.get(...).then(... populate map ...).catch(...)
}
}
// sthelse.vue file
<template>
<div>
<h1>Tree structure</h1>
<ul >
<item v-for="child in map[root]"
:key="child.id"
:name="child.name"
:children="child.Children">
</item>
</ul>
</div>
</template>
I have googled but I haven't found something that works.
Has anybody dealt with a similar problem?
Is there a way it can be done?
Store a reference to the loaded map keys inside the vuex state like:
state: {
map: {},
keysLoaded: []
}
Then inside the mutation that handle the data push the key to keysLoaded, the in your component you can use a computed property like:
showTree () {
return this.$store.state.keysLoaded.includes(this.root)
}
render the ul only if showTree its true:
<ul v-if="showTree">
I am having a bear of a time getting my VueJs app to render data from an external API. I've attempted to search for a similar issue, but everything I've found has been of no help.
I'm using the the USDA's nutrition database. When I run the code below, I can see through dev tools that my getNutrients function is making a successful call to the database when I click the button, yet my v-for element won't render any data. If I attempt to simply render nutrients from my data object, I'm able to render all of the raw JSON, just not when I try to render singular items within the v-for element.
Any help with getting the render to work would be greatly appreciated.
Thank you in advance
<template>
<div>
<button #click="getNutrients">Click</button>
<ul>
<li v-for="nutrient in nutrients">{{nutrient.nutrient_id}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'home',
data () {
return {
nutrients: {}
}
},
methods: {
getNutrients: function () {
axios.get('https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=DEMO_KEY&nutrients=205&nutrients=204&nutrients=208&nutrients=269')
.then(response => {this.nutrients = response.data})
}
}
}
</script>
If it helps, I'm using the Vue Webpack template through the Vue-CLI.
The API's returning a report object, which contains an array of foods, each of which contains an array of nutrients, so you'd need to loop through the foods, then through the nutrients in each food:
<ul>
<li v-for="food in foods">
<h2>{{food.name}}</h2>
<ul>
<li v-for="nutrient in food.nutrients">{{nutrient.nutrient_id}}</li>
</ul>
</li>
</ul>
axios.get(url).then(response => {
this.foods = response.data.report.foods
})
First of all : I'm using laravel spark and the given setup of vue that comes with spark.
I have a "home" component with the prop "custom". Within custom there's a "passwords" array. (Entry added by code of directive, it's initialized empty)
My component ( alist) which should be bound against the data
<template id="passwords-list-template">
<div class="password" v-for="password in list">
<ul>
<li>{{ password.name }}</li>
<li>{{ password.description }}</li>
</ul>
</div>
</template>
<script>
export default {
template: '#passwords-list-template',
props: ['list'],
};
</script>
Usage
<passwords-list :list="custom.passwords"></passwords-list>
Using vue devtools I can see that my data is updating, however my list is not. Also other bindings like
<div v-show="custom.passwords.length > 0">
Are not working ...
UPDATE : Parent component (Home)
Vue.component('home', {
props: ['user', 'custom'],
ready : function() {
}
});
Usage
<home :user="user" :custom="spark.custom" inline-template>
Update 2: I played around a little bit using jsfiddle. It seems like changing the bound data object using $root works fine for me when using a method of a component. However it does not work when trying to access it using a directive
https://jsfiddle.net/wa21yho2/1/
There were a lot of errors in your Vue code. First of all, your components where isolated, there wasn't an explicit parent-child relationship.Second, there were errors in the scope of components, you were trying to set data of the parent in the child, also, you were trying to set the value of a prop, and props are by default readonly, you should have written a setter function or change them to data. And finally, I can't understand why were you trying to use a directive if there were methods and events involve?
Anyway, I rewrote your jsfiddle, I hope that you find what you need there. The chain is Root > Home > PasswordList. And the data is in the root but modified in home, the last component only show it. the key here are twoWay properties, otherwise you wouldn't be able to modify data through properties.
Here is a snippet of code
Home
var Home = Vue.component('home', {
props: {
user: {
default: ''
},
custom: {
twoWay: true
}
},
components: {
passwordList: PasswordList
},
methods: {
reset: function () {
this.custom.passwords = [];
}
}
});
// template
<home :custom.sync="spark.custom" inline-template>
{{custom | json}}
<button #click="reset">
reset in home
</button>
<password-list :list="custom.passwords"></password-list>
<password-list :list="custom.passwords"></password-list>
</home>
Here is the full jsfiddle