How to parse object key from handlebars partials. - express

while working with in express with express-handlebars as view engine and handlebars helpers. where i have created small partial for select tags but it rending plain key as string.
My Select Partials select.hbs file
<select name="" id="">
<option value="">Select</option>
{{#forEach this.select_values}}
<option value="{{../this.opt_value}}"> {{ ../this.opt_label }} </option>
{{/forEach}}
</select>
passing array of object in accounts
accounts: [
{
name: 'John',
email: 'john#example.com'
},
{
name: 'Malcolm',
email: 'malcolm#example.com'
},
{
name: 'David',
email: 'david#example.com'
}
]
Calling partials in layout
{{> modules/select select_values=accounts opt_value='name' opt_label='email'}}
I am using bellow dependencies for
"dependencies": {
"body-parser": "~1.18.2",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.15.5",
"express-handlebars": "^3.0.0",
"handlebars-helpers": "^0.10.0",
"hbs": "^4.0.1",
"morgan": "~1.9.0",
"serve-favicon": "~2.4.5"
}

It works with handlebars builtin helper lookup
added default {{#each}} loop from handlebars.
<select name="" id="">
<option value="">Select</option>
{{#each this.select_values}}
<option value="{{lookup this ../this.opt_value}}"> {{lookup this ../this.opt_label }} </option>
{{/each}}
</select>
Special thanks for #Tamlyn for explanation on lookup helper.

Related

How to set custom component fields value in Vue Query Builder

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 ?

Vee validate 4 select's selected prop doesnt work

I'm having a problem with vee-validate package.
My problem is the package cannot handle the selected attribute.
When the condition is true in the "selected" prop, the browser doesn't select it. I'm trying like this:
<div class="form-group">
<Field name="brand_id"
as="select"
class="form-control"
id="brandSelect"
>
<option value="">Válassz egyet</option>
<option v-for="brand in brands"
:value="brand.id"
:selected="product.brand && product.brand.id == brand.id"
>
{{ brand.title }}
</option>
</Field>
<ErrorMessage name="brand_id" />
</div>
package.json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#popperjs/core": "^2.10.2",
"#vitejs/plugin-vue": "^3.0.1",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.21",
"postcss": "^8.1.14",
"sass": "^1.32.11",
"vite": "^3.0.0",
"vue": "^3.2.37"
},
"dependencies": {
"vee-validate": "^4.6.9",
"yup": "^0.32.11"
}
}
Anybody had/has this issue too?
With some workaround I have a solution to set the brand_id attributes correctly in the form with setFieldValue function of the correct <Form> ref:
let self = this;
Object.values(this.products).forEach(function (product) {
if (! product.brand) {
return;
}
let productFormRef = 'productForm' + product.id;
self.$refs[productFormRef][0].setFieldValue('brand_id', product.brand.id);
});
What worked for me is to move the whole select inside the Field:
<Field as="div"
v-slot="{ field }"
v-model="product.brand.id"
name="brand_id"
class="form-group"
>
<select v-bind="field"
name="brand_id"
class="form-control"
id="brandSelect"
>
<option value="">Válassz egyet</option>
<option v-for="brand in brands"
:value="brand.id"
>
{{ brand.title }}
</option>
</select>
<!-- I can't remember if/how ErrorMessage works inside the slot -->
</Field>

Vuejs changing the selected target index to data from an array that pertains to the selection

I am trying something different using vuejs, but i want to instead replace it with the nested array data instead of the selected text. As you can see, the selectedChar is displaying the name. Displaying the name there is fine, but in reality i would like to get the value of subjects there if that name is selected in the dropdown
new Vue({
el: "#app",
data: {
todos: [
{ Name: 'DonaldDuck',dept:'Disney',subjects: ["DA_", "AS_1E1", "VV_123", "AP_DS1"] },
{ Name: "Sonic", dept:'Marvel',subjects: ["SA_", "KSL_111", "DD_123", "GP_1SA1"]},
],
selectedChar:'null'
},
methods: {
changeZ (event) {
this.selectedChar = event.target.options[event.target.options.selectedIndex].text
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<select id="dept"class="form-control" #change="changeZ($event)" style="width: 210px;">
<option value="Select a Department" selected disabled>select a character:</option>
<option v-for="t in todos" :value="todos.id" :key="todos.id">{{ t.Name }}</option>
</select>
<p><span>You Selected: {{ selectedChar }}</span></p>
instead. thanks!
You should really be utilizing v-model to bind the value of the <select> to a data property. The Vue docs specifically have a subsection on binding objects to <select> inputs. When you bind the whole object value you can then display any property of that object.
<select
id="dept"
class="form-control"
v-model="selection"
style="width: 210px"
>
<option v-for="t in todos" :value="t" :key="t.id">
{{ t.Name }}
</option>
</select>
<p>
<span>You Selected: {{ selection.subjects }}</span>
</p>
data: {
todos: [
{ Name: 'DonaldDuck',dept:'Disney',subjects: ["DA_", "AS_1E1", "VV_123", "AP_DS1"] },
{ Name: "Sonic", dept:'Marvel',subjects: ["SA_", "KSL_111", "DD_123", "GP_1SA1"]},
],
selection: {}
}

How do you make default option with V-bind when using an object?

So I have the following code in vue.js:
<template>
...
<div v-for="guest in guests" :key="guest">
<label for="attendance">Will {{guest}} be attending? </label>
<select v-model="attendance[guest]" id='attendance'>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br><br>
</div>
...
<script>
...
data() {
return {
guests: {},
numGuests: 0,
sleepOver: null,
attendance: { },
};
I am trying to make yes default. I've read other solutions that says the v-model overrides it. The solutions I have found seem not to apply to my specific code. I tried putting it in my attendance and it does not work. Any suggestions related to my code?
Hope it will help you fix the issue
Step 1: First correct your model. When you are going with v-for always model it should be an array. so guests should be an array which having the property on name and willBeAttending property
data () {
return {
guests: [{
name: 'Jeba',
willBeAttending: 'yes'
},
{
name: 'Suthan',
willBeAttending: 'no'
}],
numGuests: 0,
sleepOver: null,
}
}
Step 2: Template should be like below
<div v-for="(guest, $index)" in guests" :key="$index">
<label for="attendance">Will {{guest.name}} be attending? </label>
<select v-model="guest.willBeAttending" id='attendance'>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br><br>
</div>
DEMO

How to get ID from object when using Vue v-for

I have a select with options created using a Vue.js v-for loop. This works fine but the issue I am having is taking and ID of the option and assigning that to my v-model
What's in my data property
mplans: [
{
name: 'silver',
id: 'silver-m-2019-07-16'
},
{
name: 'gold',
id: 'gold-m-2019-07-16'
},
],
My select
<select class="form-control" v-model="plan">
<option disabled hidden>Select A Plan</option>
<option v-for="plan in mplans">{{ plan.name }} - Monthly</option>
</select>
You can do this to get the ID from the selected option
<select class="form-control" v-model="plan">
<option disabled hidden value="">Select A Plan</option>
<option v-for="p in mplans" :value="p.id" :key="p.id">
{{ p.name }} - Monthly
</option>
</select>
Note: I've changed the v-for "plan" for "p", it can be ambiguous