I'm building an application in Vuejs where I'm creating a render function for input fields. I'm emitting an input event to bind with v-model. I can see values are getting assigned while I assign/insert any values, but when I assign the other way i.e. assigning any value to v-model for input fields it shows empty or it shows the placeholder values if it is available
Here is my code:
createElement('input', {
class: 'form-control m-input',
attrs: { type: this.type, placeholder: this.placeholder },
on: {
input: (event) => {
this.$emit('input', event.target.value)
}
}
})
In props I have:
props: {
label: String,
type: String,
placeholder: String,
},
and while declaring components I do:
<nits-input
label="Email"
type="email"
placeholder="Enter your email"
v-model="email"
>
</nits-input>
In data I'm trying to assign the values:
data() {
return {
email: 'test#example.com',
}
},
How can I achieve assigning values to v-model and displaying it inside the respective fields. Help me out with this. Thanks.
v-model is really just shorthand for having a value prop and emitting an input event.
So in addition to your existing props, you need to add a value one:
props: {
label: String,
type: String,
placeholder: String,
value: String
},
Related
I am creating a blog article creation field, in which each field is gathered into fields: {} object.
data: {
fields: {
title: '',
slug: ''
}
},
I want to take the title and use a slugify method on that value, from which the computed should return the end-slug into the slug input.
This would work on a non-nested field:
computed: {
slug: function () {
return this.slugify(this.fields.title)
}
},
How can I access the nested field from computed?
Inputs:
<input type="text" class="form-control"
v-model="fields.title" placeholder="Enter your title">
<input v-model="fields.slug" type="text" class="form-control" disabled>
I need to use v-model on both inputs.
This works well and i get the slug, the problem is is that the data in fields.slug is not changing. How do I get my computed slug value into my fields.slug?
This question already has answers here:
Access vue instance/data inside filter method
(3 answers)
Closed 2 years ago.
I'm creating a simple Vuejs div component (to show a specific value) which needs to receive: a lists, a placeholder and a value as props. What I'm trying to do is displaying the value with the data from my database, if the user picks a new value from the lists, it should take that new value and display it. However, if the user never picks a new value and the data from the database is empty, it should display the placeholder.
So I have used filters to achieve this. However, it outputs an error: "Cannot read property 'lists' of undefined", which comes from the filters (I know because it outputs no error if I comment out the filters). When I changed the filter to this:
filters: {
placeholderFilter () {
return this.placeholderText || this.placeholder
}
}
It says:""Cannot read property 'placeholderText' of undefined"". So I was wondering if the filters properties executed before the data and props properties. What is the execution order of them? I have attached some of the relevant code down below. Anyway, If you could come up with a better way to achieve this. I would appreciate it!
Here is my component:
<template>
<div>{{ placeholderText | placeholderFilter }}</div>
<li #click="pickItem(index)" v-for="(list,index) in lists" :key="index">{{ list }}</li>
</template>
<script>
export default {
props: {
lists: {
type: Array,
required: true
},
value: {
type: [String, Number],
default: ''
},
placeholder: {
type: String,
default: ''
}
},
data () {
return {
selected: -1,
placeholderText: this.value || this.placeholder
}
},
methods: {
pickItem (index) {
this.selected = index
}
},
filters: {
placeholderFilter () {
return this.lists[this.selected] || this.placeholderText || this.placeholder
}
}
}
</script>
And this is where I use it:
<my-component
placeholder="Please type something"
value="Data from database"
lists="['option1','option2','option3']"
>
</my-component>
Filters aren't bound to the component instance, so they simply don't have access to it through the this keyword. They are meant to always be passed a parameter and to return a transformed version of that parameter. So in other words, they're just methods. They were removed in Vue 3 entirely probably for that reason.
And yeah, what you're looking for here is a computed!
I am facing an issue with semantic-ui-vue dropdown.
Here is my sandbox link: https://codesandbox.io/s/3qknm52pm5.
In my sandbox, I have two dropdowns: From and To.
From shows the correct values and To doesn't due to key mismatch.
My App.vue contain this script
<script>
export default {
data() {
return {
from: [],
to: [],
fromCollection: [
{
value: "abc#gmail.com",
text: "abc#gmail.com"
},
{
value: "def#gmail.com",
text: "def#gmail.com"
},
{
value: "qwerty#gmail.com",
text: "qwerty#gmail.com"
},
{
value: "shubham#gmail.com",
text: "shubham#gmail.com"
}
],
toCollection: [
{
email: "abc#gmail.com"
},
{
email: "def#gmail.com"
},
{
email: "qwerty#gmail.com"
},
{
email: "shubham#gmail.com"
}
]
};
}
};
</script>
and the component I used for both of them are
<sui-dropdown
fluid
multiple
:options="fromCollection"
placeholder="from"
selection
v-model="from"
search
:allowAdditions="true"
text="email"
/>
<sui-dropdown
fluid
multiple
:options="toCollection"
placeholder="from"
selection
v-model="to"
search
:allowAdditions="true"
text="email"
/>
The 1st dropdown shows the correct values because I have passed the data from fromCollection whereas the 2nd dropdown doesn't show any text because I have passed the data from toCollection which has different key names.
Can someone help me to pass the data with dynamic keys like toCollection?
I couldn't find anything related in the documentation.
Can someone help?
there is no way to define field name for dropdown
only use computed to regenerate new array for it
demo
I am using VueJS and I have a form with two fields. The user is required to enter the first field, and I want the value of second field to be calculated using the value from first field and passing it through a method.
HTML
<div id="app">
<input type="text" v-model="value.label">
<input type="text" v-model="value.slug">
<!-- Slug value to display here -->
<br /><br />
{{value}}
</div>
Javascript
new Vue({
el:'#app',
data:{
value:{
label: '',
slug: '' // This value is calculated by passing label to santiize()
}
},
computed: {
},
methods: {
sanitize (label) {
return label+'something'
}
}
});
The user enters the first field which updates value.label
We need to pass value.label through sanitize() method and update value.slug . This should also immediately show up in the form field.I don't know how to do it. So, if the user types nothing in the form field it will have an automatic value returned as described.
Along with that it would have been awesome, if we allow the user to bypass what the santize function returns, if the user decides to type the slug value himself in the form field. So, if the user decides to type, the typed value will be set.
I created this fiddle for it - https://jsfiddle.net/9z61hvx0/8/
I was able to solve the problem by changing the data structure a bit and adding a watcher to 'label...
new Vue({
el:'#app',
data:{
label:'',
slug: ''
},
computed: {
computedSlug () {
return this.value.label+'Manish'
}
},
watch: {
label: function () {
this.slug = this.sanitize(this.label)
}
},
methods: {
sanitize (label) {
return label+'something'
}
}
});
Any other more sophesticated answers are most welcome :)
I am converting a project from Angular to Web Components / Custom Elements and am trying to replace ng-model by creating a binding for the following text field:
<input type="search" class="form-control search_input" placeholder="Search for someone new" value$="[[userLookup:input]]" required autocomplete="off">
Obviously since this is converted from Angular, I need to be able to access this value in a JavaScript function:
(function(customElements) {
class RecentSearch extends PolymerMixins.LightDomMixin(Polymer.Element) {
static get is() { return 'recent-search'; }
static get properties() {
return {
properties: {
user: {
type: Object
},
userLookup: {
type: String,
reflectToAttribute: true,
value: '',
},
},
};
}
lookupUser() {
if (this.userlookup) {
$state.go('users', { query: userlookup });
}
};
}
customElements.define(RecentSearch.is, RecentSearch);
})(window.customElements);
How would I access the userLookup property (the one bound to the text field) from inside the lookupUser function?
You're already accessing userLookup correctly from lookupUser() with this.userLookup. The event handler's context (i.e., this) is the Polymer element instance.
However, your data binding is incorrectly a one-way data binding, so userLookup would not be updated. This kind of binding needs to be two-way (i.e., with curly brackets) and cannot use attribute binding (i.e., $=).
The correct usage should be something like this:
<input placeholder="Search for someone new"
value="{{userLookup::change}}" />
demo