I am working on project with vue.js and element.ui and I am not sure how to handle a problem.
I have an array of objects like this that includes arrays in them, for example:
array:
[
{
"name": string
"array1": array
}
]
I have a table with v-for to display this array of objects like this:
<tr v-for="(man, index) in array" :key="index">
<td>
<el-input v-model="man.name"></el-input>
</td>
<td>
<el-input v-model="man.array1"></el-input>
</td>
</tr>
When I try to edit the main array1 the type is changing to string but I am not sure which way is the best to change it back to array.
How do you recommend to handle this issue ?
el-inputis not made to handle arrays.
an html input deals with text (or numbers) only.
You can't display an array in an input so ... it can't give you back an array.
I don't know what you are trying to achieve so I can't help you more but you can edit your question to give us more informations.
Related
I want to add an a href link Go Back
I want to bind the value from rows, which is an array:
rows: [["href": "href.com", "id"=>"10"], ["href":"href.com", "id"=>"20"]]
href value its the same on each array, so how can I get href without doing v-for="row in rows"
You currently have an array within an array. I assume your intention was to have an object within an array, like this:
rows: [{"href": "href.com", "id": "10"}, {"href":"href.com", "id": "20"}]
In which case you can do what Psidom suggested and access the object within the rows array with rows[0]['href'] or do a v-for within rows like this:
<template v-for="row in rows" :key="row.id">
<a :href="row.href">Link</a>
</template>
Taking your array as [{"href": "href.com", "id":"10"}, {"href":"href.com", "id":"20"}] and all subarrays have the same href, you can extract the first element in the rows with rows[0] and then access the href key as a normal javascript object. In the template, you can write <a :href="rows[0]['href']">Go Back</a>.
I need some help in figuring out the best way to create a customAttribute that will allow for an easy edit-toggle. Here is what I'm looking for:
<tr toggle-edit>
<td edit-hide>${model.name}</td>
<td edit-show><input type="text" value.bind="model.name"></td>
<td><button edit-trigger>Edit</button></td>
</tr>
So basically I want a customAttribute named toggleEdit that will look for edit-trigger attribute and add an event listener to it that will toogle a variable true/false and depending on it will either show or hide the elements that have edit-hide / edit-show.
I'd prefer to not travers the DOM inside the element to find these attributes as it feels jQuerish, is this achievable?
I want to have a customAttribute like this because I have at least 10 elements that will use an edit button and having a variable for each one of them and then use if.bind seems like a bad idea. I could always do inside of the template itself through click.delegate="myShowVar = !myShowVar" but as far as I know puting logic inside html is a bad practice (coming from an angular background).
I would add a plunker/codepen but because of the whole compilation and libraries dependencies this does not seem like an easy task.
Many thanks for any ideas.
Use the contenteditable attribute
I recommend against trying to have a custom attribute automagically handling this for you. You'll probably run into more problems than you'll solve this way. Instead, I recommend that you create an editable property in your view model and bind to it.
The contenteditable attribute is a standard HTML attribute that allows for editing the content of HTML elements, such as DIVs, and is supported out of the box with Aurelia. I recommend leveraging it if it will meet your needs. Here's how:
table.html
<td contenteditable.bind="editable"></td>
<td><button click.delegate="editable = !editable"></td>
Full running gist here: https://gist.run/?id=c4e716f21f4f9c15a9346cfacbdae74b
Since my <tr></tr> turned out to be a 14 line code (with some animation on toggling) I decided it was best to create a customElement out of it. The problem I ran on was that customElements don't really work as table elements (similar as in other frameworks). The soultion to this is to use a as-element attribute.
Inside of the customElement I used contenteditable which is actually a better solution than using if.bind since swapping between input and a div produces a jumping effect because of the difference in styles (which of course could be circumnavigated by applying certain style to them but contenteditable works out-of-the-box).
This is more or less what I created (parent.html):
<tr as-element="my-custom-row"
title="My first row"
is-editable="true"
model.two-way="myModel.name"
value-changed-callback.call="updateModel(myModel)">
</tr>
And inside my-custom-row.html:
<template>
<td>${title & oneTime}</td>
<td>
<div contenteditable.one-way="editingEnabled ? 'true' : 'false'"
blur.trigger="valueChanged(model)"
textcontent.two-way="model">
</div>
<div class="my-class" class.one-way="editingEnabled ? 'my-class--active' : ''"></div>
</td>
<td>
<span class="edit-icon"
click.delegate="editingEnabled = !editingEnabled"
if.one-time="isEditable">
</span>
</td>
</template>
This way I don't have to create a variable for each edit since editingEnabled is unique to each customElement.
As I side note, I think it's better to be more explicit and to use one-way/two-way/one-time instead of bind since it's clear what is happening.
I will also provide the corresponding js for a full answer(my-custom-row.js):
import { bindable } from 'aurelia-framework';
export class MyCustomRow {
#bindable model;
#bindable title;
#bindable isEditable;
#bindable valueChangedCallback;
constructor() {}
valueChanged(modelValue) {
this.valueChangedCallback({ modelValue })
}
}
I do not know why it's not recognizing the fields which I have created in python file.I am getiing error as QWebException: "amt_inv" while evaluating
"line['amt_inv']"
This is my python file,
class account_move_line(models.Model):
_inherit = "account.move.line"
amt_inv=fields.Char('Invoice')
amt_reinv=fields.Char('Refunded Invoice')
This is a small part of my xml file,
<tr t-foreach="lines(partner)" t-as="line">
<td>
<t t-if="line['credit']==0">
<span t-esc="line['amt_inv']"/></t>
<t t-if="line['credit']>0">
<span t-esc="line['amt_reinv']"/></t>
</td>
Basically in your case your function lines(partner) will not returned the values properly.so your line instance of lines function is not part of the key so that you are facing that problem.
First it much and more important things is that you have to check the proper logic which you were returned from your lines() function.
For Example :
I have mentioned over hear what the actually you are returned from the dictionary and how we are iterate over the loop using our Qweb View file.
def lines(o.partner_id):
Your logic mentioned over hear for make a new the dictionary
res={
'amt_inv':2022,
'amt-reinv':5244.20,
'credit':0,
}
return list(res)
<tr t-foreach="lines(partner)" t-as="line">
<td>
<t t-if="line['credit']==0">
<span t-esc="line['amt_inv']"/></t>
<t t-if="line['credit']>0">
<span t-esc="line['amt_reinv']"/></t>
</td>
hear you can access as line instance form the key of that value as amt_inv key.
please try to check again your lines function logic It will return the proper list of dictionary or not
I hope my answer may helpful for your :)
I want to use a classname to set a background on a element, but i'm not sure if it's possible with LESS js at the moment.
The case is:
I have a table with a list of athletes, on these lists i want to show a country flag as a background of a p tag.
In HTML it looks like:
<table>
<tr>
<td class="athlete"><p class="us">Athlete 1</p></td>
</tr>
</table>
I want to set the background image through a mixin, if i can get the classname from the P tag i would be there.
.athlete {
p {
.setBackgroundImage(#ClassName);
}
}
is there anyway in LESS to achieve this?
The problem is that i need a whole new rule for every possible country. My loop implementation didn't cut it either.
I went for the javascript implementation, i add a background image to a iso coded classname in a certain parent class.
<div class="nationality">
<p class="athlete">Athlete X<span class="nl"></span></p>
</div>
jQuery(".nationality span").css('background-image', 'url(../img/flags/60/'+jQuery(".nationality span").attr("class")+'.png);
Thanks guys.
I'm revamping a small helpdesk application (moving from ASP classic to MVC4). This is my first full MVC application. I've opted to go with Razor, and I feel like it's pretty intuitive. But I've hit a wall on this part.
I get a list of tickets from the database to display to the user. What I would like is to dynamically create a table. Right now I have put the headers in place manually, which is fine. If there's a way to do that dynamically, though, I'm open to suggestions.
But the crucial piece is to get each property from the ticket. I have a Ticket class that has over 20 properties. I'll be working on whittling those down to the minimum we want to display, but as a starting point, I'm trying to throw them all up on the screen.
I have the following:
#model IList<Helpdesk4.Models.Ticket>
...
#foreach (var ticket in Model)
{
<tr>
#foreach (var item in ticket)
{
<td>item</td>
}
</tr>
}
But I can't run that foreach on ticket. I'm enough of a noob that I don't totally understand why, but I think that the properties have to be loaded and so can't be enumerated by default. So without pulling up each property name, how do I just get each property's value from ticket?
I am using NHibernate for the queries to the db if that makes any difference.
The absolutely clearest and easiest way to do this if to manually add each of the properties values to the row. This does require a small amount of "extra" work, but it is a one time thing, and 20 properties is not that much. It also gives you much finer control over exactly how each property is displayed, if it is aligned right or left, etc.
What you end up with is something like this
#foreach (var ticket in Model)
{
<tr>
<td>
#ticket.FirstProperty
</td>
<td class="align-right">
#ticket.SecondProperty
</td>
<td class="align-center bold">
#Html.DisplayFor(m => ticket.ThirdProperty)
</td>
<td>
<i>#ticket.FourthProperty</i>
</td>
...
</tr>
}
Stylings and such added for emphasis of customizability.
Good luck with your first MVC project!
Foreach only works with an enumerable item, and general classes don't implement IEnumerable. You need to put each item on there yourself. The best way would be to use something like Html.TextBoxFor(m => m.Property) for each property.
edit:
The best way would be to just use Html.LabelFor on the object itself.
#for(int index = 0; index < Model.Count; ++index)
{
<tr>
#Html.LabelFor(m => m[index])
<tr>
}