I want to have the possibility to click on the item name and it must have 2 comportment:
expand it
select it
I saw that by default it wasn't possible https://github.com/vuetifyjs/vuetify/issues/5947
But maybe someone here have an actual hack ?
Or is it actually against the component convention(rules) ?
Here is a sandbox if you wanna try some things:
https://codesandbox.io/s/prod-https-esb6m?file=/App.vue
Thanks.
clear open-on-click props, add a ref on the treeview then
call
#update:active="()=>{this.$refs.treeview.open.push(item[0])}"
watch: {
active(to, from){
if (!this.open.includes(to)){
this.open.push(to);
}
}
},
Related
After searching the products on the search button, I have to list them in the background and make a selection.
Codes:
//The area I want clicked each time
<div v-for="(item, index) in filteredProducts" #click="addToList(item)"></div>
How can I get it to take action automatically?
You Can Use computed
See This Answer
computed: {
addToListComputed (item) {
addToList(item)
},
},
What do you mean "take action?" Do you want to run addToList(item) function every time someone searches a product?
You can use a watcher or computed property and run that addToList function when filteredProducts change, instead of a click event. I don't see why you would want to "auto click" on a div.
If you could further explain your question and provide a larger codebase, I could help better.
I am using a v-for inside a template to show a list from a computed property. But even though it works when i refresh, i cannot see the listed items when i firstly get on the page. If i v-for my contacts, i cannot filter.
So my data and computed methods look like this:
export default {
data() {
return {
contacts: this.$store.getters.loadedContacts,
search: ""
};
},
computed: {
filterContacts(contacts) {
return this.contacts.filter(contact => {
return contact.name.toLowerCase().match(this.search.toLowerCase());
});
}
};
And i call it in my HTML like this (filterContacts):
<v-list two-line v-if="contacts">
<template v-for="(contact, index) in filterContacts">
<v-list-tile-content>
<v-list-tile-title>{{ contact.name }}</v-list-tile-title>
<v-list-tile-action-text>{{ contact.position }}</v-list-tile-action-text>
</v-list-tile-content>
</template>
</v-list>
So the actual question is this: Why do need to refresh my page to see the results from the for loop ?
If i don't call the filterContacs, i cannot use my filter.
Any suggestions how to solve both filtering and v-for loop?
Thanks and sorry if this is a novice one!
Any help is much appreciated
Data of the component is set upon creation. The getter in the store probably doesn't return any data yet.
You can safely replace this.contacts in your computed with this.$store.getters.loadedContacts.
Other thing you can choose for, perhaps more elegant, is to use vuex's mapGetter helper. It reactively maps a vuex getter to your component's computed property (read more here: https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper).
With mapGetters you would:
...mapGetters({
contacts: 'loadedContacts'
})
And then just remove contacts from your data declaration.
Thanks! I actually observed at what you said. Indeed by replacing this.contacts with this.$store.getters.loadedContacts did fixed my problem. I removed also "contacts" from data().
Thanks!
I have a list i need to render with a button that will onPress save a value to the store then change to a different route but the problem is that when I console.log(props) i get {"index":1, "title":"hello world"} but if I do console.log(props.index) i get blank it doesn't give me a value why is this?
Your error must come from something else. There is no problem with what you are describing, such as :
var props = {
"index": 1,
"something": "else"
}
console.log(props);
console.log(props.index);
Try to use an other prop name like "myCustomIndex", i'm not sure but maybe this keyword is not allowed in props.
I've got a Vuetify select, with the following syntax.
<v-select label="..." autocomplete
append-icon="search" :items="plots" item-value="id" item-text="plotHeader"
v-model="selectedPlot" v-on:change="loadPlotInformation();">
</v-select>
So when the page loads, the dropdown initializes with an Ajax request. But when the user changes the value, the model reflects the old value, not the current selection.
Inside the function.
loadPlotInformation() {
console.log(this.selectedPlot);
}
Update:
I was able to fix the issue by transitioning to blur event. But why would change event not resolve?
If you want to take new value instead of the old value, you should use nextTick method.
eg:
loadPlotInformation() {
this.$nextTick(() => {
console.log(this.selectedPlot);
})
};
Try to change your function to read the parameter of your function.
loadPlotInformation(e) {
console.log(e);
}
But this way you need to check if you want to update your model variable
I've just wanted to know if it is possible to find a DOM element by the key attribute of vue?
I'm currently working with a list. I'm displaying it via v-for directive on a div. I'm binding the key with the index of the elements.
v-for="(apk, index) in project.apks" v-bind:key="index"
It would really help me if i could compute something for each of these elements as soon as they are fetch from my server and displayed. It's just parsing a file and looking for keyword, and accordingly choosing a css class for the items.
The problem is I dont know how to call a method for each of these elements as soon as they are added to the DOM. They are a lot of html events but i couldnt find one representing the object beeing inserted to dom :(
The purpose of key is not selecting element. Even if it can be done, don't do it.
The proper way to do it is by using ref.
for example, add ref attribute to your html like this
v-for="(apk, index) in project.apks" v-bind:key="index" :ref="'sample-ref-'+index"
and then in your methods, you can get the DOM using this.$refs['sample-ref-0'],this.$refs['sample-ref-1'] and so on.
Hope this helps.
I found that if you give the 'ref' the same name in a v-for, like this:
<div v-for="data in list" :key="data.id" ref="bar"></div>
Then you will find they just store in an array called 'bar' and you can visit them by:
this.$refs['bar'][index]
something like this could allow you to find a component by key :
this.$children.forEach(child=>{
print("child.$vnode.key")
})
also use mounted , as it gets called when the component is added to the dom:
mounted:function(){
this.$el.querySelector("#ele1")...
}
The problem is I dont know how to call a method for each of these elements as soon as they are added to the DOM. They are a lot of html events but i couldnt find one representing the object beeing inserted to dom :(
You can create a new component with your v-for and just call the created() hook.
Example
/* On your main function */
<div v-for="apk in project.apks">
<apk :data="apk"></apk>
</div>
/* On your 'apk' component */
export default {
props: [ "data" ],
created() {
console.log("Created !");
}
}