I am using https://dabernathy89.github.io/vue-query-builder/ Vue Query Builder. Now, I need to use custom-component type. Here is the code for the rules in the parent component:
rules: [
{
type: "text",
id: "url_regex",
label: "Url Regex",
},
{
type: "text",
id: "page_source",
label: "Page Source ",
},
{
type: "custom-component",
id: "page_dom_element",
label: "Page Dom Element",
operators: [],
component : PageDomElement,
},
],
Above you can see that, third rules contain custom-component type and the component is PageDomElement.
And this PageDomElement is look like this:
<template>
<div>
<input type="text" id="page_dom_element" class="form-control" placeholder="jQuery path"/>
<select name="" id="" class="form-control">
<option value="equals">equals</option>
<option value="does-not-equals">does not equals</option>
<option value="contains">contains</option>
<option value="does-not-contain">does not contain</option>
<option value="is-empty">is empty</option>
<option value="is-not-empty">is not empty</option>
<option value="begins-with">begins with</option>
<option value="end-with">end with</option>
</select>
<input type="text" class="form-control"/>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
Now, my question is how can I get the this custom component fields value ?
Related
Let's go to the point of the question. I have a selection component, it looks like this:
<template>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="category_id">
Product Category
</label>
<select
name="category_id"
id="category_id"
:class="form.errors.has('category_id') ? 'form-control is-invalid' : 'form-control'"
v-model="form.sharedState.category_id">
<option value="" disabled hidden>Select Category</option>
<option
v-for="category in categories"
:key="category.id"
v-text="category.name"
:value="category.id"
#click="$emit('category-selected', category.sub_categories)">
</option>
</select>
<small
class="form-text text-danger"
v-if="form.errors.has('category_id')"
v-text="form.errors.get('category_id')"></small>
</div>
</div>
<div class="col-md-6">
<div
class="form-group"
v-if="revealSubCategory"
#category-selected="show">
<label for="category_id">
Sub Category
</label>
<select
name="sub_category_id"
id="sub_category_id"
:class="form.errors.has('sub_category_id') ? 'form-control is-invalid' : 'form-control'"
v-model="form.sharedState.sub_category_id">
<option value="" disabled hidden>Select Sub Category</option>
<option
v-for="subcategory in subcategories"
:key="subcategory.id"
v-text="subcategory.name"
:value="subcategory.id">
</option>
</select>
<small
class="form-text text-danger"
v-if="form.errors.has('category_id')"
v-text="form.errors.get('category_id')"></small>
</div>
</div>
</div>
</template>
<script>
import BaseCard from './BaseCard.vue';
export default {
components: {
BaseCard
},
data() {
return {
categories: [],
revealSubCategory: false,
subcategories: [],
form: new Form({
sharedState: product.data
})
}
},
mounted() {
this.getCategories();
},
methods: {
getCategories() {
axios.get('categories')
.then(({data}) => this.categories = data);
},
show(subcategories) {
this.revealSubCategory = true;
this.subcategories = subcategories
}
}
}
</script>
And a select sub category input (it is there on the second column) which is will be displayed once the user has selected one of the categories options. Each category option has relation to sub categories taken from the API.
How can I get the sub categories and display the input? I already tried #change on the select tag but I can't pass the sub category object because it is outside the loop. And #click event seems to be not working in an option tag.
You can watch the v-model of the first select and change subcategory.
watch:{
"form.sharedState.category_id": function (val) {
// update subcategories here
}
I am trying to make a vueapp that sets a property when the user clicks on an option tag. I'm trying to use v-on:click but it hasn't worked. Any ideas?
<div v-show="loggedin==1" class="searchBy">
<h2>Selected Display</h2>
<select v-model="selectedDisplayShapeText">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display.shapetext" v-on:click="displayName=display.name">{{display.name}}</option>
</select>
</div>
You can retrieve the option on the change event of select:
new Vue({
el: "#app",
data() {
return {
displays: [{ name: "Display1", shapetext: "1" }, { name: "Display2", shapetext: "2" }, { name: "Display3", shapetext: "3" }],
selectedDisplayShapeText: '',
displayName: ''
}
},
methods: {
getDisplayName(e){
let value = e.target.value
let display = this.displays.find(d => d.shapetext == value)
this.displayName = display.name
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<h2>Selected Display</h2>
<select v-model="selectedDisplayShapeText" v-on:change="getDisplayName($event)">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display.shapetext">{{display.name}}</option>
</select>
<p>Display selected: {{ displayName }}</p>
</div>
You can bind the value of a select option in Vue to a complex expression (in this case an object).
Instead of binding your selected option to a property of the display object, just bind it to the display object itself. Then, whenever you need one of the properties of the selected display, you can just reference them from the selected display.
Here is an example.
console.clear()
new Vue({
el: "#app",
data:{
displays: [
{shapetext: "shape text 1", name: "display one"},
{shapetext: "shape text 2", name: "display two"},
{shapetext: "shape text 3", name: "display three"},
],
selectedDisplay: {}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<h2>Selected Display</h2>
<select v-model="selectedDisplay">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display" >{{display.name}}</option>
</select>
<hr>
Selected Display shapetext: {{selectedDisplay.shapetext}} <br>
Selected Display name: {{selectedDisplay.name}}
</div>
<div v-for="value in day" class="checkboxFour">
<input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
<label for="need" style=" width: 30%!important;">{{value.name}}</label>
<select v-model="value.from" class="select-style">From
<option value="08:00">08.00</option>
<option value="12:00">12.00</option>
<option value="20:00">20.00</option>
<option value="23:00">23.00</option>
</select>
<select v-model="value.to" class="select-style">To
<option value="08:00">08.00</option>
<option value="12:00">12.00</option>
<option value="20:00">20.00</option>
<option value="23:00">23.00</option>
</select>
<br>
</div>
This is select option. When I use required="". I am getting getAttribute error. How can I able to correct the same?
Also how can I use selected in the following case? My target is select a particular value previously and then user can change according to his need? Please help me to obtain the same?
The required attribute is a boolean (an not a class). You don't need to give it a value; if it is present in the select tag, the select is required.
You can also bind it to a boolean value to change whether the select is required.
new Vue({
el: '#app',
data: {
isRequired: false
}
});
[required] {
outline: thin solid red;
}
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<select required>
<option>An option</option>
</select> This one is always required
<div>
<select :required="isRequired">
<option>Whatever</option>
</select>
<input type="checkbox" v-model="isRequired"> Is Required: {{isRequired}}
</div>
</div>
As it mentioned in Vue.JS docs you can use v-bind:class to achieve what you wanted:
<select v-model="value.from" v-bind:class="{required: isRequired}">
which required is data, computed field in your app/component.
Update 1:
new Vue({
el: "#myApp",
data: {
// you should define a variable in your data
isRequired: false
},
methods: {
doSomething: function(){
this.isRequired = true;
}
}
});
Using v-for, I am looping through a component. The component is for each client. In this component, I have same form for each client and when a select value is selected for the first component (client 1), I want to select this value for every client.
Do I need to pass the data to the root and create a single source of truth variable?
I tried setting up a basic version:
<div id="app">
<my-comp v-for="x in 2" v-bind:val="x"></my-comp>
</div>
Vue.component('my-comp', {
props: ['val'],
template: `
<div>
<div>
<label>Status</label>
<select :data-client="val" #change="statusChanged">
<option selected="" disabled="" value="0"></option>
<option value="xxx">Xxx</option>
<option value="yyy">Yyy</option>
<option value="zzz">Zzz</option>
</select>
</div>
</div>
`,
methods: {
statusChanged(e) {
var client = e.target.getAttribute('data-client')
if (client == 1) {
alert('set same value for client 2')
}
}
}
})
new Vue({
el: '#app',
})
Here is a fiddle: https://jsfiddle.net/w53164t2/
I considered a little bit after my original answer and have come up with something I think is a little bit more real world than the example fiddle provided in the original question; specifically it is easy to make all the selects reflect the same value if they are all using the same source value, however I expect in a real world scenario each component would be independently bound to a single client. Each client would want their individual value to change, with the one caveat that if a "master" client changed, then all non-master clients should change to the master client's value.
To that end, this might be a case where I think a component specific bus is appropriate. The master would emit an event when it's value changed and the the other clients would set their value with respect to the master.
console.clear()
const MyCompBus = new Vue()
Vue.component('my-comp', {
props: ['val', 'master'],
computed:{
selected:{
get(){return this.val},
set(v){
this.$emit('update:val', v)
if (this.master)
MyCompBus.$emit("master-updated", v)
}
}
},
methods:{
onMasterUpdated(newMasterValue){
if (this.master) return
this.selected = newMasterValue
}
},
created(){
MyCompBus.$on('master-updated', this.onMasterUpdated)
},
beforeDestroy(){
MyCompBus.$off('master-updated', this.onMasterUpdated)
},
template: `
<div>
<div>
<label>Status</label>
<select v-model="selected">
<option selected="" disabled="" value="0"></option>
<option value="xxx">Xxx</option>
<option value="yyy">Yyy</option>
<option value="zzz">Zzz</option>
</select>
</div>
</div>
`,
})
new Vue({
el: '#app',
data:{
masterValue: null,
clients:[
{id: 1, selectedValue: null, master: true},
{id: 2, selectedValue: null},
{id: 3, selectedValue: null},
{id: 4, selectedValue: null},
]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<my-comp v-for="client in clients"
:val.sync="client.selectedValue"
:master="client.master"
:key="client.id">
</my-comp>
{{clients}}
</div>
Original Answer
Bind them all to the same value using v-model.
Vue.component('my-comp', {
props: ['value'],
computed:{
selected:{
get(){return this.value},
set(v){this.$emit('input', v)}
}
},
template: `
<div>
<div>
<label>Status</label>
<select v-model="selected">
<option selected="" disabled="" value="0"></option>
<option value="xxx">Xxx</option>
<option value="yyy">Yyy</option>
<option value="zzz">Zzz</option>
</select>
</div>
</div>
`,
})
And in the template:
<my-comp v-for="x in 2" v-model="selectedValue" :key="x"></my-comp>
Here is the updated fiddle.
If you want to stick with val as the property you can use .sync instead.
Vue.component('my-comp', {
props: ['val'],
computed:{
selected:{
get(){return this.val},
set(v){this.$emit('update:val', v)}
}
},
template: `
<div>
<div>
<label>Status</label>
<select v-model="selected">
<option selected="" disabled="" value="0"></option>
<option value="xxx">Xxx</option>
<option value="yyy">Yyy</option>
<option value="zzz">Zzz</option>
</select>
</div>
</div>
`,
})
And in the template:
<my-comp v-for="x in 2" :val.sync="selectedValue" :key="x"></my-comp>
Example fiddle.
If you want just one of them designated as a "master" select, then add a property that does so.
Vue.component('my-comp', {
props: ['val', 'master'],
computed:{
selected:{
get(){return this.val},
set(v){if (this.master) this.$emit('update:val', v)}
}
},
template: `
<div>
<div>
<label>Status</label>
<select v-model="selected">
<option selected="" disabled="" value="0"></option>
<option value="xxx">Xxx</option>
<option value="yyy">Yyy</option>
<option value="zzz">Zzz</option>
</select>
</div>
</div>
`,
})
And in the template:
<my-comp v-for="x in 5" :val.sync="selectedValue" :master="1 == x" :key="x"></my-comp>
Example fiddle.
I have this:-
<div class="form-group">
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple">
<option value=true>Yes</option>
<option value=false>No</option>
</select>
</div>
I set allowMultiple=true when I initialize it, but when I select No then allowMultiple='false' So its no longer a Boolean but a String? How to get it to be Boolean?
In HTML, if you set attribute value in a tag, the value will be default type--string.So you can use vue v-model to bind it to other type value, for example, Boolean, Number and etc.
Following code is working, the result is what you want
new Vue({
el:'#app',
data: {
allowMultiple: false
},
methods: {
print: function () {
alert(this.allowMultiple);
}
}
})
<div class="form-group" id='app'>
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple" #change='print'>
<option :value='true'>Yes</option>
<option :value='false'>No</option>
</select>
</div>
<script src="https://unpkg.com/vue#2.4.2/dist/vue.min.js"></script>
Here is a way to do it in Vue.
Instead of hard coding your options in html. Use the Vue way, set an array of options in your Vue data then use v-for to render all the options from the array.
Each option should have 2 properties: a text and a value. The value should be the boolean you are looking for.
Now whenever the user changes the selected option, it will always be boolean.
new Vue({
el: '#app',
data: {
allowMultiple: true,
options: [
{text: 'Yes', value: true},
{text: 'No', value: false},
],
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div class="form-group">
<div>Allow multiple: {{allowMultiple}} [Type: {{typeof allowMultiple}}]</div><br>
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple">
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
</div>
</div>
The easier and quicker way I found that works for me is this:
<select id="selected" v-model="item.selected">
<option :value=0>No</option>
<option :value=1>Yes</option>
</select>
Maybe it's useful for anyone.
Try this:
<option value=1>Yes</option>
<option value=0>No</option>