I am new to VUE and I am wondering is there any way I can have a unique id per row with this kind of implementation
<template slot="display" scope="row">
<table-display>
<input type="checkbox" />
</table-display>
<table-display class="j-td-code">
<input type="text" v-model="row.data.code" />
</table-display>
<table-display class="j-td-name" value="">
<input type="text" v-model="row.data.name"/>
</table-display>
<table-display >
<img :src="updateIcon">
</table-display>
<table-display >
<img :src="deleteIcon" #click="destroy(row.data)">
</table-display>
</template>
is a component and slotted on my parent component.
Hopefully someone could help me been working on this since yesterday.
Thanks! :)
Related
I am trying to output the value of individual checkboxes and also add a class to the label when the checkbox is checked. I can do one of the other but not both together. If I add :value="attendance" the output works as individual instances but the adding of the class doesn't work and if I add value="attendance" then it treats the 2 checkboxes as one value.
Can someone help please?
<div class="container">
<div class="row">
<div class="col-sm">
<label
class="btn btn-outline-primary label-in-filter"
:class="{
showattendances:
showattendancesisChecked('attendance'),
}"
v-for="attendance in uniqueattendances"
:key="attendance"
>
<!-- <input
value="attendance"
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
v-model="attendances"
/> -->
<input
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
:value="attendance"
v-model="attendances"
/>
{{ attendance }}
</label>
</div>
<p v-for="attendance in attendances" :key="attendance">
{{ attendance }}
</p>
</div>
</div>
methods: {
showattendancesisChecked(value) {
return this.attendances.includes(value);
},}
I'm using a custom element to print the length of an input element. I got it working in a regular environment, but I have trouble creating unique refs in a repeat.for environment
I've tried using combinations of ref=name$index or ref=name${$index}, but none of them work so far.
In a non-repetitive environment, this works
<div class="row">
<label>
Name
<my-custom-element field.bind="name"></my-custom-element>
<input
type="text"
name="name"
ref="name"
value.bind="name"
maxlength="150" />
</label>
</div>
However, once I use repeat for, it stops working, cause I am using field.bind and ref wrongly. E.g.
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="name${$index}"></my-custom-element>
<input
type="text"
name="name${$index}"
ref="name${$index}"
value.bind="item.name"
maxlength="150" />
</label>
</div>
I'm just trying to make the ref look something like name0, name1, name2 etc, so that it is unique.
The error looks like Parser Error: Unconsumed token { at column 5 in expression [name${$index}]
You are iterating through items, which presumably is an array of objects having a name property. I think you want something more like the following:
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="item.name"></my-custom-element>
<input
type="text"
name="item.name"
ref="item.name"
value.bind="item.name"
maxlength="150" />
</label>
I have some questions getting from the database, It has options also. Then rendering those on the webpage.
like This
<div v-for="(question,index) in questions">
<div class="interview__item-text interview__text-main m-b-20">
{{ index+1 }}. {{ question.question }}
</div>
<div v-for="(option,index) in question.options"
class="reg__form-radioitem" :key="index">
<div>
<input class="checkbox countable__input"
v-model="question.answer"
:value="option.option"
type="checkbox"
:id="question.id+option.id">
<label :for="question.id+option.id">
{{ option.option }}
</label>
</div>
</div>
</div
This is working fine for input type text and radio but for checkbox it does not work. It checks all the checkboxes in that loop.
question.answer does not exist on the data.i am trying to add new property answer using v-model
Thanks.
Maybe you can try to predefine the question.answer, should exist after this:
data: {
question: {
answer: null
}
}
Try this.
<input class="checkbox countable__input"
v-model="question[answer]"
:value="option.option"
type="checkbox"
:id="question.id+option.id">
<label :for="question.id+option.id">
{{ option.option }}
</label>
Can I debug the below mentioned code on *.cshtml file ? I have used knockout js as my client side java script library.
<div data-bind="ifnot: book()">
<div>
<h2>Add New Book</h2>
</div>
<div>
<label for="name">Name</label>
<input data-bind="value: $root.Name" type="text" title="Name" />
</div>
<div>
<label for="publisher">Publisher</label>
<input data-bind="value: $root.Publisher" type="text" title="Publisher" />
</div>
<div>
<label for="price">Price</label>
<input data-bind="value: $root.Price" type="text" title="Price" />
</div>
<br />
<div>
<button data-bind="click: $root.create">Save</button>
<button data-bind="click: $root.reset">Reset</button>
</div>
</div>
On above code I need to check the values of say "book() or $root.Name ,etc".Can I do that ?
UPDATE:On Fire bug
You'll need to use client side debugging. Either use a developer toolbar (opened with F12 in most browsers) or use Visual Studio Client Script debugging.
After the #nemesv link I did small R&D about this.Below I have mentioned the way you can find the KO binding values of the DOM elements.Hope this will help someone in future.
Link for the Extension : KnockoutJs Context Debugger
The way you can find the KO Values on DOM elements.
I need to render a MultiCheckbox like below:
Wanted:
<label>
<input type="checkbox" name="privacy[read_only]" value="1" /> Just for read only
</label>
<label>
<input type="checkbox" name="privacy[is_pulic]" value="1" /> Is public
</label>
How can I do that? I just can do with:
Unwanted:
<label>
<input type="checkbox" name="privacy[]" value="read_only" /> Just for read only
</label>
<label>
<input type="checkbox" name="privacy[]" value="is_pulic" /> Is public
</label>
Thanks so much for any your ideas.
If there was nothing else in your form, or you didn't mind each form element having the same format, you could use setElementsBelongTo($array) which is a method on a Zend_Form.
You might also then have to use individual checkboxes to acheive the desired markup, so this may or may not work in your scenario.