See this codepen:
https://codepen.io/anon/pen/gNOGmY?editors=1010
// HTML
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>
<v-card-text>
{{ searchedItems }}
<v-subheader class="pa-0">Where do you live?</v-subheader>
<v-autocomplete
v-model="model"
:items="states"
:label="State"
:search-input.sync="filter"
ref="selectExample"
>
</v-autocomplete>
</v-card-text>
</v-card>
</v-app>
</div>
// JS
new Vue({
el: '#app',
data () {
return {
model: null,
filter: '',
searchedItems: [],
states: [
'Alabama', 'Alaska', 'American Samoa', 'Arizona',
'Arkansas', 'California', 'Colorado', 'Connecticut',
'Delaware', 'District of Columbia', 'Federated States of Micronesia',
'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
'Missouri', 'Montana', 'Nebraska', 'Nevada',
'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
]
}
},
watch:{
filter(newVal){
// I want to get the filtered items list here
this.searchedItems = this.$refs['selectExample'].items
}
}
})
My use case is that when user types in the autocomplete input box, the list of items gets filtered in the dropdown list and I want to use that filtered items.
Vuetify's docs does not mention any prop that exposes this filtered list. Does anyone know how I can get that list in my code?
Thank you in advance :)
VAutocomplete stores it in filteredItems property.
You used ref <v-autocomplete ref="selectExample" so then you can access it like so:
this.$refs.selectExample.filteredItems
Related
the actual display of the table
Got problems with data-binding under such circumstance. Input boxes from the whole row seems to be recognizede as one.
<h2>Vue3 + Element plus Dyanamic table</h2>
<el-table :data="tableData" style="width: 100%">
<el-table-column
:prop="index"
:label="item"
v-for="(item, index) in tableHeader"
:key="index"
>
<template v-slot="scope">
<el-input :name="item" v-model="scope.row.index"></el-input>
</template>
</el-table-column>
</el-table>
data() {
return {
tableHeader: {
1: "Name",
2: "Birthday",
3: "Address",
4: "Age",
5: "Tel",
},
tableData: [{
1:'',
2:'',
3:'',
4:'',
5:'',
}, {
1:'',
2:'',
3:'',
4:'',
5:'',
}]
I'm trying to load the table header(namely the number of the columns and each column's name) from back-end data. Input boxes is the main feature in this table. And i want to store the data fram input boxes into tableData and then send it back to back-end.How could i fix this?
Here is an example of a very basic Element+ Table from the Docs.
The way you are trying to bind props to index does not make sense to me.
<template>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
i copy example from https://next.vuetifyjs.com/en/components/selects/ , but it dosnt work
enter image description here
<v-select
v-model="select"
:items="items"
item-text="state"
item-value="abbr"
return-object
single-line
></v-select>
data() {
return {
select: {state: 'Florida', abbr: 'FL'},
items: [
{state: 'Florida', abbr: 'FL'},
{state: 'Georgia', abbr: 'GA'},
{state: 'Nebraska', abbr: 'NE'},
{state: 'California', abbr: 'CA'},
{state: 'New York', abbr: 'NY'},
],
}
}
package json:
"vuetify": "^3.0.0-beta.3",
if i click on dropdown element i get error:
Uncaught (in promise) TypeError: Cannot read properties of undefined
(reading '__asyncLoader')
at isAsyncWrapper (runtime-core.esm-bundler.js?d2dd:2246:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6034:1)
at unmountChildren (runtime-core.esm-bundler.js?d2dd:6185:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6065:1)
at unmountComponent (runtime-core.esm-bundler.js?d2dd:6156:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6041:1)
at unmountChildren (runtime-core.esm-bundler.js?d2dd:6185:1)
at unmount (runtime-core.esm-bundler.js?d2dd:6065:1)
at unmountComponent (runtime-core.esm-bundler.js?d2dd:6156:1)
at unmount (runtime-core.esm-bundler.js?d2dd
:6041:1)
I want to change cursor default to pointer when active autocomplete in Vuetify.
I tried to make css code to change cursor.
but mouse drag on the autocomplete bottom, cursor change "text" style like "I beem". I want to show the "pointer " style.
I couldn't find out any idea Vuetify web site.
Does anyone have idea?
<template>
<v-card>
<v-container fluid>
<v-row
align="center"
>
<v-col cols="12">
<v-autocomplete
v-model="value"
:items="items"
dense
filled
label="Filled"
class="test_cursor"
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
export default {
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
values: ['foo', 'bar'],
value: null,
}),
}
</script>
<style lang="scss" scoped>
.test_cursor{
cursor: pointer;
}
</style>
By default cursor is set to text (which appears as the "I-beam" you mention), but you can change the v-autocomplete's cursor by targeting the input in your CSS:
.test_cursor input {
cursor: pointer;
}
new Vue({
vuetify: new Vuetify(),
el: '#app',
data () {
return {
states: [
{ name: 'Florida', abbr: 'FL', id: 1 },
{ name: 'Georgia', abbr: 'GA', id: 2 },
{ name: 'Nebraska', abbr: 'NE', id: 3 },
{ name: 'California', abbr: 'CA', id: 4 },
{ name: 'New York', abbr: 'NY', id: 5 },
],
}
},
})
.test_cursor input {
cursor: pointer;
}
<script src="https://unpkg.com/vue#2.6.11"></script>
<script src="https://unpkg.com/vuetify#2.3.5"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.3.5/dist/vuetify.css">
<v-app id="app">
<v-autocomplete
class="test_cursor"
:items="states"
item-text="name"
label="State"
></v-autocomplete>
</v-app>
I don't know why, but my radio buttons are without value.
I have the following json (my json), and I'm rendering the items as v-radio buttons inside a v-radio-group, my radio button label is item.description and value is item.id, but i can't get the value by v-model="picked", why this is happening?
when I inspect the page, this is the description of my radio buttons, it is not returning a value
<input aria-checked="false" id="input-90" role="radio" type="radio" name="radio-80" value="">
My json
CATEGORIES = [{
'title': 'vegetables:',
'items': [
{
'id': '19',
'description': 'asparagus',
}
]
},
{
'title': 'Fruits:',
'items': [
{
'id':'21',
'description': 'oranges',
},
{
'id': '22',
'description': 'Apples',
},
{
'id':'23',
'description': 'pears',
},
{
'id': '24',
'description': 'limes',
},
{
'id': '25',
'description': 'avocados',
},
]
},]
My template
<template>
<v-container>
<h3>Select the issue category:</h3>
<v-form >
<v-radio-group v-model="radios" :mandatory="false" >
<v-list dense v-for="category in categories" :key="category">
<v-list-item-title>{{category.title}}</v-list-item-title>
<br>
<v-radio v-for="item in category.items"
:key="item"
:label="item.description"
:value="item.id"
:name="items"
v-model="picked"></v-radio>
</v-list>
</v-radio-group>
</v-form>
</v-container>
</template>
The biggest problem is you're nesting two v-models. If you set a v-model on the <v-radio-group> you only set value on the <v-radio>, not v-model and it will select that value in the radio group model. If you want multiple values, you should either use checkboxes (which is the same as radios but the model holds the array of all checked items, not only one) or perhaps multiple radio groups, if that's the required app logic.
Another problem is you're not key-ing correctly. You should only use unique primitives as your keys, not objects. In your case, category.title and item.id make good key candidates, provided they are unique.
Also, you don't have an items defined.
Last, but not least, you seem to be using radios and picked in your template without defining them (at least in what you're showing here).
If you look in your console, Vue informs you about all of the above errors. The console is your friend. Here's your example, working. But I'm not sure if it has the desired logic of your app:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
radios: [],
categories: [{
'title': 'vegetables:',
'items': [{
'id': '19',
'description': 'asparagus',
}]
},
{
'title': 'Fruits:',
'items': [{
'id': '21',
'description': 'oranges',
},
{
'id': '22',
'description': 'Apples',
},
{
'id': '23',
'description': 'pears',
},
{
'id': '24',
'description': 'limes',
},
{
'id': '25',
'description': 'avocados',
},
]
}
]
})
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-container>
<h3>Select the issue category:</h3>
<v-form>
<v-radio-group v-model="radios" :mandatory="false">
<v-list dense v-for="category in categories" :key="category.title">
<v-list-item-title>{{category.title}}</v-list-item-title>
<v-radio v-for="item in category.items"
:key="item.id"
:label="item.description"
:value="item.id"
:name="item.description"></v-radio>
</v-list>
</v-radio-group>
</v-form>
</v-container>
</div>
My view like this :
<div id="app">
<h1>Simple typeahead example</h1>
<input placeholder="Search US states" #input="input" v-model="typeahead" />
<ul v-if="!selected && typeahead">
<li v-for="state in states | filterBy typeahead" #click="select(state)">{{ state }}</li>
</ul>
</div>
My vue component like this :
new Vue({
el: '#app',
data: {
selected: null,
typeahead: null,
states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
},
methods: {
select: function(state){
this.typeahead = state
this.selected = state
},
input: function(){
this.selected = null
}
}
});
Demo and full code like this : http://jsfiddle.net/oscar11/tm8k8907/10/
The code above works. But it use vue router
I do not want to use vue router
Is there any other way without using vue router?
Try this:
html:
<li v-for="state in states" v-if="filterBySelect(state)" #click="select(state)">{{ state }}</li>
Method:
filterBySelect (value) {
if (!this.typeahead || this.typeahead.length === 0) return true
return value.toLowerCase().split(this.typeahead.toLowerCase()).length > 1
}