I am working through and attempting to alter an example piece of code, so that #change events are triggered from a base select input child component.
The base component is the following
<template>
<div class="form-group">
<label>{{ label }}</label>
<select
class="form-control"
:class="{
'is-valid': validator && !validator.$error && validator.$dirty,
'is-invalid': validator && validator.$error
}"
#change="$emit('input', $event.target.value)"
>
<option
v-for="opt in options"
:key="opt.value"
:value="opt.value"
:selected="value === opt.value"
>
{{ opt.label || 'No label' }}
</option>
</select>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
required: true
},
options: {
type: Array,
required: true,
validator (opts) {
return !opts.find(opt => typeof opt !== 'object')
}
},
value: {
type: String,
required: true
},
validator: {
type: Object,
required: false,
validator ($v) {
return $v.hasOwnProperty('$model')
}
}
}
}
</script>
and the child component has the reference
<BaseSelect
label="What do you love most about Vue?"
:options="loveOptions"
v-model="$v.form.love"
v-on:change="changeItem($event)"
/>
...
methods: {
changeItem (event) {
console.log('onChange')
console.log(event.target.value)
},
It appears the method is not being hit, it works as expected when I use a select input rather than the BaseSelect, so I suspect there is something missing or not quite right in the setup here.
You are emitting an input event, but listening for a change event:
#change="$emit('input', $event.target.value)"
...
v-on:change="changeItem($event)"
Related
I have created a reusable input component with label, but i want label to hide(if hidden it should not take a space something like display none in css) on some place and label should be visible on some places
here is my code of the input component
<template>
<div>
<label for="" :label="label" class="mb-1 select-label">{{label}}</label> //hide or visible depending on requirement
<div class="custom-select" :tabindex="tabindex" #blur="open = false">
<div class="selected" :class="{ open: open }" #click="open = !open">
{{ selected }}
</div>
<div class="items" :class="{ selectHide: !open }">
<div
v-for="(option, i) of options"
:key="i"
#click="
selected = option;
open = false;
$emit('input', option);
"
class="border-bottom px-3"
>
{{ option }}
</div>
</div>
</div>
</div>
</template>
here is the code of my script
<script>
export default {
props: {
label: {
type: String,
required: false,
default: ''
},
options: {
type: Array,
required: true,
},
default: {
type: String,
required: false,
default: null,
},
tabindex: {
type: Number,
required: false,
default: 0,
},
},
data() {
return {
selected: this.default
? this.default
: this.options.length > 0
? this.options[0]
: null,
open: false,
};
},
mounted() {
this.$emit("input", this.selected);
},
}
</script>
You can use v-if directive to conditionally render the label element based on the props value.
As v-if will actually destroy and recreate elements when the conditional is toggled. Hence, all the classes/attributes applied to the element will also destroy.
Demo :
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
showMessage: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-if="showMessage">{{ message }}</p>
</div>
If you will run above code snippet and open the developer console. You will see that <p> element will not be there as it has been removed from the DOM.
console screenshot :
You can just add a prop to control label visibility
script:
props: {
showLabel: {
type: Boolean,
default: false
}
}
template:
<label v-show="showLabel" />
parent component:
<MyCustomInput :show-label="false" />
<MyCustomInput :show-label="true" />
I found some code on the internet to develop an input component. The component works great. However, since there is no two-way binding between the parent and the child. I'm wondering what this.$emit("change", value); does. How does this update the parent? I'm not putting 1 and 2 together here. Thank you in advance.
<template>
<div>
<div class="form-control-label" v-if="label">{{ label }}</div>
<div v-for="(option, index) in options" :key="option.text">
<div class="custom-control custom-radio">
<input
:id="id + index"
:name="id"
type="radio"
:value="option.value"
:checked="option.value === value"
:class="inputClass"
class="custom-control-input"
:disabled="disabled"
:required="required"
#change="updateValue(option.value)"
/>
<label :for="id + index" class="custom-control-label">{{
option.text
}}</label>
<slot v-if="option.value === value" :name="option.value" />
</div>
</div>
<validation-provider v-slot="{ errors }" :name="label" rules="required">
<input type="hidden" v-model="selected" />
<slot name="error">
<div v-if="errors[0]" class="invalid-feedback" style="display: block;">
{{ errors[0] }}
</div>
</slot>
</validation-provider>
</div>
</template>
<script>
export default {
model: {
event: "change",
selected: null,
},
props: {
rules: {
type: String,
required: false,
},
id: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
value: {
type: [String, Number, Boolean, Object],
default: null,
},
options: {
type: [Array],
required: true,
},
required: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
inputClass: {
type: [String, Object],
default: "",
},
},
methods: {
updateValue(value) {
this.selected = value;
this.$emit("change", value);
},
},
};
</script>
Normally, v-model works by the component receiving a value prop and emitting an input event that contains the updated value.
Your component implements v-model by taking a value prop, and emitting a change event (instead of input event), as specified by the model option. Whenever the component emits the change event in updateValue(), the component's consumer sets the v-model variable to the event's value.
In the following example, selectedOption is set to "my value" when the radio option in MyOptions is selected:
// App.vue
<MyOptions v-model="selectedOption" />
// MyOptions.vue
<input type="radio" #change="$emit('change', 'my value')">
I'm new to Vue.js (using Nuxt.js) and what I'm trying to achieve is to have a Select component that I can reuse everywhere and is W3C compliant.
With the help of #Jasmonate answers, I managed to create this component, it's working. But the value attribute is still visible in the source code and so isn't W3C compliant. Maybe the problem is coming from somewhere else in the project ?!
Parent component
<custom-select
:options="options"
v-model="selectedOption"
></custom-select>
<span>Selected : {{ selectedOption }}</span>
<script>
data() {
return {
selectedOption: "A",
options: [
{ label: "One", value: "A" },
{ label: "Two", value: "B" },
{ label: "Three", value: "C" }
],
};
}
</script>
custom-select.vue
<template>
<select :value="value" #input="clicked">
<option
v-for="option in options"
:key="option.label"
:value="option.value"
>
{{ option.label }}
</option>
</select>
</template>
<script>
export default {
props: {
value: {
required: true
},
options: {
type: Array,
required: true
}
},
methods: {
clicked($event) {
this.$emit("input", $event.target.value);
}
}
};
</script>
I read those documentation pages:
Form Input Bindings
Components Basics
And also looked around the web to find example of v-model in a custom component, but it's always about the input tag. The only example I found about a custom select with v-model isn't actually a select tag, like the Vue Select plugin or this thread on StackOverflow.
v-model is syntax sugar. By default, the value is a prop that has the name value, and it changes (two-way-binding) whenever the event input is emitted.
Also, v-model is bound on the select element, not option.
Your code can be modified as such:
<template>
<select :value="value" #input="clicked">
<option
v-for="option in options"
:key="option.label"
:value="option.value"
>
{{ option.label }}
</option>
</select>
</template>
<script>
export default {
props: {
value: {
required: true
},
options: {
type: Array,
required: true
}
},
methods: {
clicked($event) {
this.$emit('input', $event.target.value);
}
}
};
</script>
Documentation here: https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components
You can also change the prop name and event name that v-model uses, see: https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
I am trying to set the checked value of a Radio Button list in Vue.JS 2. I've reviewed existing articles here and tried them and also several different manual approaches and I just cannot get this to work at all.
I am NOT using v-model here as I'm working on a custom radio button list control which is consumed by a forms builder. This is further complicated by the fact that I am building, on top, a nested radio button list to handle nullable booleans. Putting that complexity aside, my radio component looks like this....
<template>
<div class="form__radio-list">
<span class="form__radio-list__intro">{{ introText }}</span>
<ul class="form__radio-list__options">
<li v-for="item in options"
:key="item.key ? item.key : item"
class="form__radio-list__options__item">
<input type="radio"
:id="item.key ? item.key.toKebabCase() : item.toKebabCase()"
:name="def"
:value="item.value != undefined ? item.value : item"
:disabled="disabled"
:checked="isChecked(item)"
#input="onInput"
#change="$emit('change', $event.target.checked)">
<label :for="item.key ? item.key : item">{{ item.text ? item.text : item }}</label>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
def: {
type: String,
required: true
},
introText: {
type: String,
default: ''
},
options: {
type: Array,
required: true
},
initialValue: {
type: [String, Number, Boolean],
default: null
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
value: this.initialValue
}
},
methods: {
_parseValue() {
return this.value ? parseInt(this.value) : null
},
isChecked(item) {
const checked = item.value === this.value || item === this.value || item.value == this._parseValue()
this.$logger.logObject({ item, parentValue: this.value, checked }, 'Checking value for an item')
return checked
},
onInput($event) {
this.value = $event.target.checked
this.$emit('input', $event.target.checked)
}
}
}
</script>
From the logging I can see that the value of 'checked' SHOULD be set correctly (but it isn't).
I also tried splitting the input tag into a 'v-if' statement so I'd have one with a checked parameter set and one without (although this felt horrible) and that worked from an HTML point of view (checked="checked" appeared where I would expect it to) but, on the browser neither of the 2 options were checked.
I am consuming the component through a boolean component renederer that looks like this...
<template>
<hh-radio class="form__radio-list--yes-no"
:def="def"
:intro-text="introText"
:options="options"
:initial-value="initialValue"
:disabled="disabled"
#change="$emit('change', $event)"
#input="$emit('input', $event)" />
</template>
<script>
export default {
props: {
def: {
type: String,
required: true
},
introText: {
type: String,
default: ''
},
initialValue: {
type: [String, Boolean],
default: null
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
options() {
return [{
key: 'yes',
text: 'Yes',
value: true
}, {
key: 'no',
text: 'No',
value: false
}]
}
}
}
</script>
This is then consumed ultimately on a form like this...
<hh-yes-no class="editable-segment-field__bool"
:def="pvc-enabled"
:initial-value="pvc.value"
#input="onInput" />
The value pass throughs seem to work fine - The key issue that I have is that it will NOT specify the currently selected item from any existing data.
I have tried suggestions here - Vue.JS radio input without v-model and here - Vue.JS checkbox without v-model without much success.
Using the example given me below I've tried to strip this back as far as I can, adding in pieces of the dynamic elements from my components as I go to identify the problem root.
I now have a simpler component which looks like this...
<template>
<div :class="`form__radio-list ${(this.def ? `form__radio-list--${this.def} js-${this.def}` : '' )}`">
<span class="form__radio-list__intro">{{ introText }}</span>
<ul class="form__radio-list__options">
<li class="form__radio-list__options__item">
<input id="awesome"
type="radio"
name="isawesome"
:checked="radio === 'Awesome'"
value="Awesome"
#change="radio = $event.target.value">
<label for="awesome">Awesome</label>
</li>
<li class="form__radio-list__options__item">
<input id="super"
type="radio"
name="isawesome"
:checked="radio === 'Super Awesome'"
value="Super Awesome"
#change="radio = $event.target.value">
<label for="super">Super</label>
</li>
</ul>
<span>Selected: {{ value }} | {{ radio }}</span>
</div>
</template>
<script>
export default {
props: {
def: {
type: String,
required: true
},
introText: {
type: String,
default: ''
},
initialValue: {
type: [String, Boolean],
default: null
},
disabled: {
type: Boolean,
default: false
}
},
// delete this
data() {
return {
value: this.initialValue,
radio: 'Awesome'
}
},
computed: {
options() {
return [{
key: 'yes',
text: 'Yes',
value: true
}, {
key: 'no',
text: 'No',
value: false
}]
}
}
}
</script>
I managed to get this to fail as soon as I added name="isawesome" to the radio button items. It seems that when you introduce 'name' something goes awry. Surely I need 'name' to prevent multiple radio button lists interacting with each other or is this something that Vue handles which I've been unaware of.
Here is an working example:
new Vue({
el: "#app",
data: {
radio: 'Awesome'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span>Vue is:</span> <br>
<label>Awesome
<input
type="radio"
:checked="radio === 'Awesome'"
value="Awesome"
#change="radio = $event.target.value"
>
</label>
<label>Super Awesome
<input
type="radio"
:checked="radio === 'Super Awesome'"
value="Super Awesome"
#change="radio = $event.target.value"
>
</label>
<hr>
<span>Selected: {{radio}}</span>
</div>
This appears to be a bug / oddity with Vue.js. Using roli roli's example I was able to take both his example and my requirement and keep tweaking until they met in the middle so I could find out the problem via process of elimination.
Here is a copy of the component with both elements together. As #birdspider commented above, I would not expect this to work in HTML. In Vue, however, it DOES....
<template>
<div :class="`form__radio-list ${(this.def ? `form__radio-list--${this.def} js-${this.def}` : '' )}`">
<span class="form__radio-list__intro">{{ introText }}</span>
<ul class="form__radio-list__options">
<li class="form__radio-list__options__item">
<input id="yes"
type="radio"
:checked="value === true"
:value="true"
#change="value = $event.target.value">
<label for="yes">Yes</label>
</li>
<li class="form__radio-list__options__item">
<input id="no"
type="radio"
:checked="value === false"
:value="false"
#change="value = $event.target.value">
<label for="no">No</label>
</li>
<li class="form__radio-list__options__item">
<input id="awesome"
type="radio"
:checked="radio === 'Awesome'"
value="Awesome"
#change="radio = $event.target.value">
<label for="awesome">Awesome</label>
</li>
<li class="form__radio-list__options__item">
<input id="super"
type="radio"
:checked="radio === 'Super Awesome'"
value="Super Awesome"
#change="radio = $event.target.value">
<label for="super">Super</label>
</li>
</ul>
<span>Selected: {{ value }} | {{ radio }}</span>
</div>
</template>
<script>
export default {
props: {
def: {
type: String,
required: true
},
introText: {
type: String,
default: ''
},
initialValue: {
type: [String, Boolean],
default: null
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
value: this.initialValue,
radio: 'Awesome'
}
}
}
</script>
This will work completely fine and renders as 2 separate radio button lists - one for yes / no and one for awesome / super awesome. If you try and add a 'name' tag to the radio inputs then the checked state is no longer set in the radio button group at all.
---- UPDATE ----
This seems like a bug where an attempt to add 'name' should simply be ignored by Vue, but it isn't. However, this isn't the case if you create an ES5 style component in codepen (I am unable to repro this in codepen for this reason.)
Using ES6 style files, this component will not set any checked values (credit to #birdspider for half of this simplified example)...
<template>
<div>
<ul class="form__radio-list__options">
<li class="form__radio-list__options__item">
<input id="awesome" type="radio" name="isawesome"
:checked="radio === 'Awesome'"
value="Awesome"
#change="onChange($event.target.value)">
<label for="awesome">Awesome</label>
</li>
<li class="form__radio-list__options__item">
<input id="super" type="radio" name="isawesome"
:checked="radio === 'Super Awesome'"
value="Super Awesome"
#change="onChange($event.target.value)">
<label for="super">Super</label>
</li>
</ul>
<ul class="form__radio-list__options">
<li class="form__radio-list__options__item">
<input id="awesome" type="radio" name="other"
:checked="radio2 === 'other'"
value="other"
#change="onChange2($event.target.value)">
<label for="awesome">other</label>
</li>
<li class="form__radio-list__options__item">
<input id="super" type="radio" name="other"
:checked="radio2 === 'another'"
value="another"
#change="onChange2($event.target.value)">
<label for="super">another</label>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
radio: 'Awesome',
radio2: 'another'
}
},
methods: {
onChange(e) {
this.radio = e
},
onChange2(e) {
this.radio2 = e
}
}
}
</script>
(if anyone can tell me how to get it running in Codepen or JS Fiddle like this then that would be great!)
If I remove the name attributes then it works.
If you put essentially the same thing in Codepen as a single Vue instance rather than a component file then that works too.
Is there a way how define checked and unchecked value for .? Now VUE sets model to true/false which makes sense but in real apps data format is somethink like '1' => true and ''=>false. How to achive this in VUE?
You can use true-value and false-value:
https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'
If you need to wrap a field in a component, then the code will have to be slightly modified.
<template>
<div class="flex items-center h-5">
<input
#input="$emit('input', reversedValue)"
:id="id"
:value="value"
type="checkbox"
:checked="checked"
/>
</div>
</template>
<script>
export default {
props: {
value: [Boolean, String, Number],
trueValue: {
type: [Boolean, String, Number],
default: true
},
falseValue: {
type: [Boolean, String, Number],
default: false
},
},
computed: {
reversedValue() {
return this.value === this.trueValue ? this.falseValue : this.trueValue;
},
checked() {
return this.value === this.trueValue;
}
}
};
</script>
Not sure what it is exactly you need, but, as you say, if you do:
{{ boxtest }}
<input type="checkbox" v-model="boxtest"/>
Boxtest will display as 'true' or 'false' as you check or uncheck the box.
If you do need to convert it you could just do the likes of:
{{ boxtest ? 1 : '' }}