I tried to get data for my vuetify drop down list by using vue-infinite-loading. function is not calling automatically.
Below is my code
<v-menu offset-y offset-x bottom left max-height="500" min-width="400" max-width="450">
<template v-slot:activator="{ on }">
<el-badge :value="unReadMessage" :hidden="hidden" class="item">
<v-icon color="white" v-on="on">notifications</v-icon>
</el-badge>
</template>
<v-list v-for="(item, index) in notification_data" :key="index">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{item.title}}</v-list-tile-title>
<v-list-tile-sub-title>{{item.description}}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<infinite-loading :identifier="infiniteId" #infinite="infiniteHandler" ref="infiniteLoading"></infinite-loading>
</menu>
Below is written in script. I already imported this "import InfiniteLoading from 'vue-infinite-loading';"
When i put the infinite loader out of the menu, its working but it shown the value out of the list
<script>
methods: {
infiniteHandler($state) {
this.loading = true;
this.axios.get(api, {
params: {
page: this.page,
},
})
.then(({data}) => {
if (data.next !== null) {
this.page += 1;
this.notification_data = this.notification_data.concat(data.results);
this.loading = false;
$state.loaded();
}
else {
this.loading = false;
this.notification_data = this.notification_data.concat(data.results);
$state.complete();
}
})
.catch(error => {
this.$notify({
type: 'error',
title: 'Error!',
message: error,
});
});
},
},
components: {
InfiniteLoading
}
</script>
Related
In order to achieve for multi search function we add a search field at each header with v-slot where we define the header name directly. For example:
<template v-slot:header.NAME="{ header }">
{{ header.text }}
<v-menu offset-y :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-text-field v-bind="attrs" v-on="on"
v-model="nameSearch"
class="pa"
type="text"
></v-text-field>
</template>
</v-menu>
</template>
Now I have around 50 headers for my data table. My idea is to render dynamically. I tried with v-for but neither it renders and or give any error. Code below:
<template v-for="(x, index) in this.headers" slot="headers" slot-scope="props">
{{ props.x.text }}
<v-menu offset-y :close-on-content-click="false" :key="index">
<template v-slot:activator="{ on, attrs }">
<v-text-field v-bind="attrs" v-on="on"
v-model="searchObj"
class="pa"
type="text"
></v-text-field>
</template>
</v-menu>
</template>
what did i missed here ? or it is completely wrong way i went ?
Below is the full code:
<template>
<v-app class="main-frame">
<v-main>
<v-data-table
:headers="headers"
:items="filteredData"
>
<template v-slot:header.NAME="{ header }">
{{ header.text }}
<v-menu offset-y :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-text-field v-bind="attrs" v-on="on"
v-model="nameSearch"
class="pa"
type="text"
></v-text-field>
</template>
</v-menu>
</template>
<template v-slot:header.DEPARTMENT="{ header }">
{{ header.text }}
<v-menu offset-y :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-text-field v-bind="attrs" v-on="on"
v-model="departmentSearch"
class="pa"
type="text"
></v-text-field>
</template>
</v-menu>
</template>
</v-data-table>
</v-main>
</v-app>
</template>
<script>
import axios from "axios";
}
export default {
name: 'Home',
data() {
return {
/* Table data */
headers: []
allData: [],
/* Column Search */
nameSearch: '',
departmentSearch: ''
}
},
computed: {
filteredData() {
let conditions = [];
if (this.nameSearch) {
conditions.push(this.filterName);
}
if (this.departmentSearch) {
conditions.push(this.filterDepartment);
}
if (conditions.length > 0) {
return this.allData.filter((data) => {
return conditions.every((condition) => {
return condition(data);
})
})
}
return this.allData;
}
},
mounted () {
this.getAllData()
},
methods: {
getAllData() {
this.allData = []
axios
.get("http://localhost:5001/"}
.then(res => {
if (res.status === 200) {
if (res.data === 0) {
console.log("Something is wrong !!!")
} else {
this.allData = res.data["allData"]
this.headers = res.data["allDataHeaders"]
}
}
}).catch(error => {
console.log(error);
})
},
filterName(item) {
return item.NAME.toLowerCase().includes(this.nameSearch.toLowerCase())
},
filterDepartment(item) {
return item.DEPARTMENT.toLowerCase().includes(this.departmentSearch.toLowerCase())
},
}
}
</script>
I have found the solution myself:
<template v-for="(header, i) in headers" v-slot:
[`header.${header.value}`]="{ }">
<div #click.stop :key="i">
{{ header.text }}
<v-text-field :key="i"
v-model="multiSearch[header.value]"
class="pa"
type="text"
:placeholder="header.value"
prepend-inner-icon="mdi-magnify"
></v-text-field>
</div>
</template>
In data, I have an empty object called:
searchObj: {}
and in computed method, i have the following method:
filteredData() {
if (this.searchObj) {
return this.allData.filter(item => {
return Object.entries(this.searchObj).every(([key, value]) => {
return (item[key] || '').toLowerCase().includes(value.toLowerCase())
})
})
} else {
return this.allData
}
},
Full solution below:
<template>
<v-app class="main-frame">
<v-main>
<v-data-table
:headers="headers"
:items="filteredData"
>
<template v-for="(header, i) in headers" v-slot:
[`header.${header.value}`]="{ }">
{{ header.text }}
<div #click.stop :key="i">
<v-text-field :key="i"
v-model="multiSearch[header.value]"
class="pa"
type="text"
:placeholder="header.value"
prepend-inner-icon="mdi-magnify"
></v-text-field>
</div>
</template>
</v-data-table>
</v-main>
</v-app>
</template>
<script>
import axios from "axios";
}
export default {
name: 'Home',
data() {
return {
/* Table data */
headers: []
allData: [],
searchObj: {},
}
},
computed: {
filteredData() {
if (this.searchObj) {
return this.allData.filter(item => {
return Object.entries(this.searchObj).every(([key, value]) => {
return (item[key] ||'').toLowerCase().includes(value.toLowerCase())
})
})
} else {
return this.allData
}
},
},
mounted () {
this.getAllData()
},
methods: {
getAllData() {
this.allData = []
axios
.get("http://localhost:5001/"}
.then(res => {
if (res.status === 200) {
if (res.data === 0) {
console.log("Something is wrong !!!")
} else {
this.allData = res.data["allData"]
this.headers = res.data["allDataHeaders"]
}
}
}).catch(error => {
console.log(error);
})
},
}
}
</script>
What I want to come true
I am creating TodoLists.
I tried to implement the following editing features, but it didn't work and I'm having trouble.
Click the edit button to display the edit text in the input field
If you click the save button after entering the changes in the input field, the changes will be reflected in the first position.
Code
<v-row v-for="(todo,index) in todos" :key="index">
<v-text-field
filled
readonly
:value="todo.text"
class="ma-3"
auto-grow
/>
<v-menu
top
rounded
>
<template #activator="{ on, attrs }">
<v-btn
v-bind="attrs"
icon
class="mt-6"
v-on="on"
>
<v-icon>
mdi-dots-vertical
</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
link
>
<v-list-item-title #click="toEdit(todos)">
<v-icon>mdi-pencil</v-icon>
Edit
</v-list-item-title>
</v-list-item>
</v-list>
<v-list>
<v-list-item
link
>
<v-list-item-title #click="removeTodo(todo)">
<v-icon>mdi-delete</v-icon>
Delete
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-row>
<v-text-field
v-model="itemText"
filled
color="pink lighten-3"
auto-grow
#keyup.enter="addTodo"
/>
<v-btn
:disabled="disabled"
#click="addTodo"
>
Save
</v-btn>
data () {
return {
editIndex: false,
hidden: false,
itemText: '',
items: [
{ title: 'Edit', icon: 'mdi-pencil' },
{ title: 'Delete', icon: 'mdi-delete' }
]
}
},
computed: {
todos () {
return this.$store.state.todos.list
},
disabled () {
return this.itemText.length === 0
}
},
methods: {
addTodo (todo) {
if (this.editIndex === false) {
this.$store.commit('todos/add', this.itemText)
this.itemText = ''
} else {
this.$store.commit('todos/edit', this.itemText, todo)
this.itemText = ''
}
},
toEdit (todo) {
this.editIndex = true
this.itemText = this.todos
},
removeTodo (todo) {
this.$store.commit('todos/remove', todo)
}
}
}
</script>
export const state = () => ({
list: []
})
export const mutations = {
add (state, text) {
state.list.push({
text
})
},
remove (state, todo) {
state.list.splice(state.list.indexOf(todo), 1)
},
edit (state, text, todo) {
state.list.splice(state.list.indexOf(todo), 1, text)
}
}
Error
Click the edit button and it will look like this
What I tried myself
//methods
toEdit (todo) {
this.editIndex = true
this.itemText = this.todos.text //add
},
// Cannot read property 'length' of undefined
For some reason I get an error that I couldn't see before
The properties/data types in your code are a bit mixed up.
Here you're accessing state.todos.list...
todos () {
return this.$store.state.todos.list
},
...but in your store the const state doesn't include todos:
export const state = () => ({
list: []
})
Furthermore, you're writing to itemText the content of todos, which should be a string but actually is an object - which leads to the output of [object Object].
toEdit (todo) {
this.editIndex = true
this.itemText = this.todos
},
Also, please check out kissu's comment about the mutations.
I'm basically trying to figure out how to listen for an event and call the axios request and rerender the results.
I have the following parent component (A select drop down) that has a change event that calls "appSelected"
<template>
<v-app>
<v-container>
<v-select :items="results" item-text="name" item-value="id" v-model="selectedOption" #change="appSelected"
:results="results"
label="Choose Application"
dense
></v-select>
</v-container>
</v-app>
</template>
appSelected
appSelected() {
Event.$emit('selected', this.selectedOption);
}
In my child component,I have an an Axios request that I'm trying to figure out how to call and re render when choosing a different option in the drop down. I know I shouldn't use "async mounted" but not sure what to use instead.
<template>
<div id="app" v-if="appselected">
<div class="card-header">
<h5 class="card-title">Components</h5>
</div>
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap>
<v-container>
<v-flex xs12 md12 class="greyBorder blue-grey lighten-5">
<div class="mr-4 ml-4 whiteback userGroupHeight">
<v-layout row wrap>
<v-flex v-for="result in results" :key="result.name" xs6>
<v-checkbox light color="success" :label="result.name" v-model="result.selected">
</v-checkbox>
</v-flex>
</v-layout>
</div>
</v-flex>
</v-container>
</v-layout>
</v-container>
</v-app>
</div>
</template>
<script>
import Vuetify from 'vuetify'
import axios from 'axios'
export default {
data () {
return {
results: [],
appselected: false
}
},
methods: {
checkLength(index) {
if (index < this.types.length - 1) {
index = index + 1;
return index;
}
},
},
async mounted() {
try {
const response = await axios.get('/componentpopulate', { params: { query: this.query, appid: 2 } })
this.results = response.data
} catch(err) {
console.log(err)
}
},
created() {
Event.$on('selected', (selectedOption) => {
this.selected = selectedOption;
this.appselected = true;
console.log('component List application id - ' + this.selected);
});
}
}
</script>
<style scoped>
.v-application {
height: 250px;
}
</style>
This is my created method is where I'm listening for the event
created() {
Event.$on('selected', (selectedOption) => {
this.selected = selectedOption;
this.appselected = true;
console.log('component List application id - ' + this.selected);
});
}
Here is where I moved to the event listener method
created() {
Event.$on('selected', (selectedOption) => {
this.selected = selectedOption;
this.appselected = true;
console.log('component List application id - ' + this.selected);
const response = axios.get('/componentpopulate', { params: { query: this.query, appid: this.selected } })
this.results = response.data
console.log(response);
});
}
Here's the answer. Add the following
.then((response) => {
this.results = response.data
console.log(response)
});
Like this
created() {
Event.$on('selected', (selectedOption) => {
this.selected = selectedOption;
this.appselected = true;
console.log('component List application id - ' + this.selected);
const response = axios.get('/componentpopulate', { params: { query: this.query, appid: this.selected } })
.then((response) => {
this.results = response.data
console.log(response)
});
});
}
Hope this helps some one.
You can try this. Use watch for your selectedOption and make your API calls in the parent component. However required parameters for API call should be in parent component with this way. Or in your store. After you can pass your results to your child component as props and display it there. Here is a small example:
Your Parent Component:
<template>
<div>
<!-- your select box -->
<Child :results="results" />
</div>
</template>
export default {
import Child from "./Child"
components: {
Child
},
data() {
return {
selectedOption : null,
results: []
}
},
watch: {
selectedOption: async function() {
await axios.get('http://jsonplaceholder.typicode.com/posts')
.then(response => {this.results = response.data})
}
}
}
And in child component:
<template>
<div>
<div v-for="item in results" :key="item.id">
{{item}}
</div>
</div>
</template>
<script>
export default {
props: ['results']
}
</script>
I have a confirm dialog, which should be shown when users perform delete action. I need to make it works globally (Many pages can use this component by passing confirm message and delete function to it). However, I haven't found a way to pass a function to this component.
Thanks in advance!
ConfirmDialog component:
<template>
<v-dialog
v-model="show"
persistent
max-width="350"
>
<v-card>
<v-card-text class="text-xs-center headline lighten-2" primary-title>
{{ message }}
</v-card-text>
<v-card-actions class="justify-center">
<v-btn color="back" dark #click="close">キャンセル</v-btn>
<v-btn color="primary" dark>削除</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
data () {
return {
show: false,
message: ''
}
},
created: function () {
this.$store.watch(state => state.confirmDialog.show, () => {
const msg = this.$store.state.confirmDialog.message
if (msg !== '') {
this.show = true
this.message = this.$store.state.confirmDialog.message
} else {
this.show = false
this.message = ''
}
})
},
methods: {
close () {
this.$store.commit('closeDialog')
}
}
}
</script>
ConfirmDialog store:
export default {
state: {
show: false,
message: '',
submitFunction: {}
},
getters: {
},
mutations: {
showDialog (state, { message, submitFunction }) {
state.show = true
state.message = message
state.submitFunction = submitFunction
},
closeDialog (state) {
state.show = false
state.message = ''
}
}
}
you can get and set states easily.
try getting the value of show with ...mapState
ConfirmDialog.vue :
<template>
<v-dialog
v-if="show"
persistent
max-width="350"
>
<v-card>
<v-card-text class="text-xs-center headline lighten-2" primary-title>
{{ message }}
</v-card-text>
<v-card-actions class="justify-center">
<v-btn color="back" dark #click="close">キャンセル</v-btn>
<v-btn color="primary" dark>削除</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import { mapState } from 'vuex';
export default {
data () {
return {
show: false,
message: ''
}
},
methods: {
close () {
this.$store.commit('closeDialog')
}
},
computed: {
...mapState({
show: 'show'
})
}
}
</script>
The store is, as the name says, a store. You have a centralized tree where you save data, not functionalities. Another reason is that functions are not serializable.
You could create this component in a global way by injecting the function as prop or by using emit and handling the functionality in the parent.
I am trying to modify the sample code at https://vuetifyjs.com/en/components/autocompletes#example-scoped-slots to allow arbitrary content not matching any autocomplete items in between chips (so user can tag other users in a message similar to slack and facebook)
So for example, the user could type "Sandra" and then select "sandra adams", then type "foo" and then type another space and start typing "John" and the autcomplete would pop up again and allow the user to select "John Smith".
I've been through all the properties in the docs and there doesn't seem to be support for this built in.
I tried using custom filtering to ignore the irrelevant parts of the message when displaying autocomplete options, but the autocomplete seems to remove non-chip content when it loses focus and I can't see a property that allows me to prevent this behavior.
not sure if the autcomplete is the thing to be using or if I would be better off hacking combo box to meet this requirement, because this sample seems closer to what I'm tryng to do https://vuetifyjs.com/en/components/combobox#example-no-data, but then I believe I lose the ajax capabilities that come with automcomplete.
You can achieve this by combining the async search of the autocomplete with the combobox.
For example:
new Vue({
el: '#app',
data: () => ({
activator: null,
attach: null,
colors: ['green', 'purple', 'indigo', 'cyan', 'teal', 'orange'],
editing: null,
descriptionLimit: 60,
index: -1,
nonce: 1,
menu: false,
count: 0,
model: [],
x: 0,
search: null,
entries: [],
y: 0
}),
computed: {
fields () {
if (!this.model) return []
return Object.keys(this.model).map(key => {
return {
key,
value: this.model[key] || 'n/a'
}
})
},
items () {
return this.entries.map(entry => {
const Description = entry.Description.length > this.descriptionLimit
? entry.Description.slice(0, this.descriptionLimit) + '...'
: entry.Description
return Object.assign({}, entry, { Description })
})
}
},
watch: {
search (val, prev) {
// Lazily load input items
axios.get('https://api.publicapis.org/entries')
.then(res => {
console.log(res.data)
const { count, entries } = res.data
this.count = count
this.entries = entries
})
.catch(err => {
console.log(err)
})
.finally(() => (this.isLoading = false))
/*if (val.length === prev.length) return
this.model = val.map(v => {
if (typeof v === 'string') {
v = {
text: v,
color: this.colors[this.nonce - 1]
}
this.items.push(v)
this.nonce++
}
return v
})*/
},
model (val, prev) {
if (val.length === prev.length) return
this.model = val.map(v => {
if (typeof v === 'string') {
v = {
Description: v
}
this.items.push(v)
this.nonce++
}
return v
})
}
},
methods: {
edit (index, item) {
if (!this.editing) {
this.editing = item
this.index = index
} else {
this.editing = null
this.index = -1
}
},
filter (item, queryText, itemText) {
const hasValue = val => val != null ? val : ''
const text = hasValue(itemText)
const query = hasValue(queryText)
return text.toString()
.toLowerCase()
.indexOf(query.toString().toLowerCase()) > -1
}
}
})
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" integrity="sha256-mpnrJ5DpEZZkwkE1ZgkEQQJW/46CSEh/STrZKOB/qoM=" crossorigin="anonymous"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-combobox
v-model="model"
:filter="filter"
:hide-no-data="!search"
:items="items"
:search-input.sync="search"
hide-selected
label="Search for an option"
:allow-overflow="false"
multiple
small-chips
solo
hide-selected
return-object
item-text="Description"
item-value="API"
:menu-props="{ closeOnClick: false, closeOnContentClick: false, openOnClick: false, maxHeight: 200 }"
dark
>
<template slot="no-data">
<v-list-tile>
<span class="subheading">Create</span>
<v-chip
label
small
>
{{ search }}
</v-chip>
</v-list-tile>
</template>
<template
v-if="item === Object(item)"
slot="selection"
slot-scope="{ item, parent, selected }"
>
<v-chip
:selected="selected"
label
small
>
<span class="pr-2">
{{ item.Description }}
</span>
<v-icon
small
#click="parent.selectItem(item)"
>close</v-icon>
</v-chip>
</template>
<template
slot="item"
slot-scope="{ index, item, parent }"
>
<v-list-tile-content>
<v-text-field
v-if="editing === item.Description"
v-model="editing"
autofocus
flat
hide-details
solo
#keyup.enter="edit(index, item)"
></v-text-field>
<v-chip
v-else
dark
label
small
>
{{ item.Description }}
</v-chip>
</v-list-tile-content>
</template>
</v-combobox>
</v-container>
</v-content>
</v-app>
</div>
so I ended up building a renderless component that is compatible with vuetify as it goes through the default slot and finds any of the types of tags (textarea, input with type of text, or contenteditable) that tribute supports, and allows you to put arbitrary vue that will be used to build the tribute menu items via a scoped slot.
in future might try to wrap it as a small NPM package to anyone who wants a declarative way to leverage tribute.js for vue in a more flexible way than vue-tribute allows, but for now here's my proof of concept
InputWithMentions.vue
<script>
import Tribute from "tributejs"
// eslint-disable-next-line
import * as css from "tributejs/dist/tribute.css"
import Vue from "vue"
export default {
mounted() {
let menuItemSlot = this.$scopedSlots.default
let tribute = new Tribute({
menuItemTemplate: item =>
{
let menuItemComponent =
new Vue({
render: function (createElement) {
return createElement('div', menuItemSlot({ menuItem: item }))
}
})
menuItemComponent.$mount()
return menuItemComponent.$el.outerHTML
},
values: [
{key: 'Phil Heartman', value: 'pheartman'},
{key: 'Gordon Ramsey', value: 'gramsey'}
]})
tribute.attach(this.$slots.default[0].elm.querySelectorAll('textarea, input[type=text], [contenteditable]'))
},
render(createElement) {
return createElement('div', this.$slots.default)
}
}
</script>
User.vue
<InputWithMentions>
<v-textarea
box
label="Label"
auto-grow
value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.">
</v-textarea>
<template slot-scope="{ menuItem }">
<v-avatar size="20" color="grey lighten-4">
<img src="https://vuetifyjs.com/apple-touch-icon-180x180.png" alt="avatar">
</v-avatar>
{{ menuItem.string }}
</template>
</InputWithMentions>