My vue component :
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input>
</v-col>
</v-row>
</v-container>
<v-btn
color="success"
#click="submit"
>
submit
</v-btn>
My codepen : https://codepen.io/positivethinking639/pen/XWWBXMW?editors=1011
I want display search like this :
So make it easier for users to choose the country code
How can I do it?
I think the simplest is to have two drop-downs side-by-side, so it looks just like the one you posted. When the user clicks "Save", have the v-model with the country code and the v-model with the number joined.
data () => ({
countryCode: '+81',
number: '555-5555'
}),
methods: {
submitForm () {
const phone = countryCode + number //or however you want to concatenate
//do other stuff here
}
}
Your other options are to splice and add the country code to the string ahead of the phone number on change, but that seems a little overkill for something with a simple solution.
If I'm not understanding your question, please add a little more detail.
If you specifically want the numbers to show, then you'll have to make changes to the library options you're using. It seems you're using vue-tel-input package, right?
You can set the + code to show with this:
inputOptions: {
showDialCode: true
}
Check out all the options here:
https://www.npmjs.com/package/vue-tel-input
Related
I am currently trying to make the active tab change when I put a value in a variable which controls the component, but it doesn't work. I am binding a variable to v-model and then changing that variable with the value I want. The point is, wheter the value is a number or a string, it doesn't matter because the tabs won't work.
<v-card flat>
<v-tabs v-model="tab" fixed-tabs>
<v-tab v-for="(instance, idx) in tabData" :key="`${idx}`" #click="callChildrenToUpdate(idx)">
<v-badge color="red" size="18" class="p-2" v-if="instance"></v-badge>
...
</v-tab>
</v-tabs>
...
</v-card>
The data:
data () {
return {
tab: null,
items: [],
tabData: this.tabsData
}
},
And then in the mounted hook I try changing it, but it won't work.
this.tab = 87
On this situation, do NOT use template strings when setting the tab key.
So to make it work, change this:
<v-tab v-for="(instance, idx) in tabData" :key="`${idx}`" #click="callChildrenToUpdate(idx)">
To:
<v-tab v-for="(instance, idx) in tabData" :key="idx" #click="callChildrenToUpdate(idx)">
Now when you do:
this.tab = 87
You should get your tabs to go to index 87 (which seems a lot).
If this is actually an ID, you could do a logic like:
this.tab = this.tabData.findIndex(i => i.id === 87)
I'm trying to use tiptap. Actually it works, but what I'm trying to do is to access the "isActive" slot from outside the editor component, and I don't know how to do it.
Here is a codesandbox example: https://codesandbox.io/s/v07xnxo807?file=/src/App.vue
You see the Editor component is called from the App.vue. The buttons in the Editor component are activated depending on the "isActive" slot functions.
What I would like is to access this slot to get for example the value of isActive.bold() from the App.vue, in order to update the model of a "multiple button" you can find on Vuetify: https://vuetifyjs.com/fr-FR/components/button-groups/
Here is for example what I could have:
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<v-btn-toggle
v-model="toggle_multiple"
dense
background-color="primary"
dark
multiple
class="my-2"
>
<v-btn :color="isActive.bold()?'red':'green'" #click="commands.bold">
<v-icon>mdi-format-bold</v-icon>
</v-btn>
<v-btn #click="commands.italic">
<v-icon>mdi-format-italic</v-icon>
</v-btn>
<v-btn #click="commands.strike">
<v-icon>mdi-format-strikethrough</v-icon>
</v-btn>
<v-btn #click="commands.underline">
<v-icon>mdi-format-underline</v-icon>
</v-btn>
<v-btn #click="commands.blockquote">
<v-icon>mdi-format-quote-open</v-icon>
</v-btn>
</v-btn-toggle>
</editor-menu-bar>
And the toggle_multiple would be computed depending on the different "isActive" function values.
I already tried:
computed: {
toggle_multiple: function () {
let t = []
if (editor) {console.log("Bold: "+editor.isActive.bold())}
return t
}
},
But I receive this error: error 'editor' is not defined
I'm open to any suggestion.
Thanks in advance.
Property isActive is stored in the tiptap instance (in your case it's this.editor):
In HTML:
<div>{{editor.isActive.bold()}}</div>
In JS:
<div>{{toggle_multiple}}</div>
computed: {
toggle_multiple () {
// Keep in mind, other properties like ".isActive.heading()" will be undefined
// until you import the extension for it.
// So the function "heading" below exists only if you're using that extension
// console.log(this.editor.isActive.heading({ level: 2 })
return this.editor.isActive.bold()
}
}
Currently, you can set rules that will work once the user changes the value of the input. For example:
Template part
<v-text-field
v-model="title"
label="Title"
></v-text-field>
Logic
export default {
data () {
return {
title: '',
email: '',
rules: {
required: value => !!value || 'Required.'
},
}
}
}
When the user focuses and removes focus from that element, or when the user deletes all its content, the required rule is triggered.
But what happens if we want to start with the rule enabled as soon as the component is mounted or created? Is there a way to achieve this?
I searched around vuetify but I could not find info about this nor examples in my humble google searches. I will appreciate help. I'm new in vue world. Thanks.
You could do the following:
Create a v-form and place your textfields inside the form. Don't forget to give your v-form a v-model and a ref too.
On mounted you can access the v-form via this.$refs and call .validate() just as Jesper described in his answer. In the codesandbox below you can see that the textfields immediately go red and display the "Required." text.
<v-form v-model="formValid" ref="myForm">
<v-text-field label="Field 1" :rules="rules.required"></v-text-field>
<v-text-field label="Field 2" :rules="rules.required"></v-text-field>
</v-form>
<script>
export default {
data() {
return {
formValid: false,
rules: {
required: [value => !!value || "Required."]
}
};
},
mounted() {
this.$refs.myForm.validate();
}
};
</script>
Example:
You should change your validation a little bit to achieve this.
<ValidationProvider rules="required" v-slot="{ errors }" ref="title">
<v-text-field
v-model="title"
label="Title"
></v-text-field>
</ValidationProvider>
And then you should call this.$refs.title.validate()
If you trigger this when mounted() is called, it should validate all the fields right away, as you're requesting.
now i have 2 Components
1 - is just a drop down list v-select
<v-row align="center" >
<v-col class="d-flex" cols="12" sm="6" v-if="Compounds" >
<v-select :items="Compounds"
v-model="selectedItems"
label="Select"
item-value="id"
item-text="name"
v-on:change="selectedCompound">
</v-select>
{{ selectedItems }}
</v-col>
</v-row>
with method
methods: {
selectedCompound(h2o) {
console.log(h2o);
console.log("This is from Selected Compound");
},
and i call it in another page
<div>
<SelectCompound></SelectCompound>
</div>
now i want to get the method "selectedCompound" and recall it on this page
so i can access the ID of it to reload the page when the user select another name from the v-select
Props are passed down, Events are emited up. If you want to communicate directly between the parent and child, you pass props from parent to child, and the child reacts to the change in value. If you however want the parent to react to changes the child component, you need to emit events.
Here is an example.
Child
methods: {
selectedCompound(h2o) {
this.$emit('valChange', h2o)
},
}
Parent
<div>
<SelectCompound #valChange="handleChange"></SelectCompound>
</div>
methods: {
handleChange(h2o) {
// handle here
console.log('parent noticed change ' + h2o)
},
}
You can also use a bus (like Vuex) to have all components communicate to a separate state manager, but it increases the complexity quite a bit compared to simple even emit.
I made this jsfiddle for you, using the localStorage as persistence if u need to reload the page, and emitting a event when any option of the select is selected, this event triggered is called change on the select tag, then just you have emit to the parent the value selected.
And using the life cycle method created() of Vue to init the value from the persistence.
I have a basic textfield that fires the input event whenever the amount of characters change.
A basic example would be this textfield
<v-text-field
:value="value"
label="Textfield"
#input="updateValue"
></v-text-field>
with this Vue instance
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return {
value: 'abc',
};
},
methods: {
updateValue(){
this.value = updateValue;
}
}
})
You can see a demo here
https://codepen.io/anon/pen/zgZWrG?editors=1010
The input event gets fired whenever the user is typing. I want to provide an option (boolean property like 'fireInputOnEachInput') and if this is false the textfield should use the change instead of input event.
A possible solution would be to use an if statement
<v-text-field
v-if="fireInputOnEachInput"
:value="value"
label="Textfield"
#input="updateValue"
></v-text-field>
<v-text-field
v-else
:value="value"
label="Textfield"
#change="updateValue"
></v-text-field>
but maybe there is a way to switch between the events only?
There is direct support for using a dynamic event name. In your template:
<v-text-field
:value="value"
label="Textfield"
#[eventName]="updateValue"
></v-text-field>
Then add a computed property:
eventName () {
return this.fireInputOnEachInput ? 'input' : 'change'
}
Note that as HTML attribute names cannot contain spaces it's tricky to write this inline. You can find more on this in the original RFC.
There are various alternatives, such as this:
<v-text-field
:value="value"
label="Textfield"
v-on="{[fireInputOnEachInput ? 'input' : 'change']: updateValue}"
></v-text-field>
In this case the square brackets are just an ES6 computed property name, see here, not to be confused with Vue computed properties which are a totally different thing.
See https://v2.vuejs.org/v2/api/#v-on for more on the various forms of v-on/# syntax.