Hello I know what is the problem but I don't know how to solve it. Please help.
I am generating input fields and text area fields, so I have 2 v-fors(I will and third one too)
<div v-for="(textarea, textareaId) in blog.textareas" :key="textareaId">
<div v-for="(sectionTitle, sectionTId) in blog.sectionTitles" :key="sectionTId">
blog:{
blogTitle: '',
images: [
{
imagesId: 0,//this was called id
name: ''
}
],
sectionTitles:[
{
sectionTId: 0,//this was called id
title: ''
},
],
textareas: [
{
textareaId:0, //this was called id
text: ''
},
]
},
I have tried to change ids to not be all three 0 but I keep getting a warning evert time I enter the same number to :key="id"
Duplicate keys detected: '1'
Duplicate keys detected: '2'
and so on.
:key="'textarea_'+textareaId" and for sectionTitles :key="'section_'+sectionTId"
Related
I have an array with some data objects that were created on various dates. I would like to only display the objects that were created within the last 24 hours.
I have tried to use moment for this, by using subtract on the date values, but it has no effect. Maybe someone here could come up with a suggestion.
Here are my computed properties. I use these because I am outputting the data in a bootstrap table, so the "key" represents the different values inside the object.
My table:
<b-card class="mt-4 mb-4">
<b-table
:items="tasks"
:fields="fields"
sort-desc
/>
</b-card>
My array (I am actually importing from a database, but for this question I will just write it manually) Please note I am just showing a single object here. In reality I have hundreds of objects
data: {
tasks: [
{ message: 'Foo' },
{ creationDateTime: '03-02-2022' },
{ isRead: false }
]
}
In my computed properties I then pass them to the table
computed: {
fields() {
return [
key: 'message',
label: 'message'),
sortable: true,
},
{
key: 'creationDateTime',
label: 'Date created',
formatter: date => moment(date).subtract(24, 'hours').locale(this.$i18n.locale).format('L'),
sortable: true,
},
{
key: 'isRead',
label: 'Has been read'),
sortable: true,
}
]
},
},
As I said, using subtract does not work. It still shows all objects in my database
I tried doing the reduction on the whole array as well, but I just get the error:
"TypeError: this.list.filter is not a function"
newTasks(){
if(this.tasks){
return moment(this.tasks.filter(task => !task.done)).subtract(24, 'hours')
}
}
I'm out of ideas.
In Moment, you can check if a date is within the last 24 hours with:
moment().diff(yourDate, 'hours') < 24
(note that future dates will also pass this check, but you can easily adjust it).
You can put this into your computed property:
newTasks(){
if(!this.tasks){
return []
}
return this.tasks.filter(task => !task.done && moment().diff(task.creationDateTime, 'hours') < 24)
}
And that's it, now newTasks should contain all tasks from the last 24 hours that are not done.
In Vue2 I got Two el-select.
One is for selecting count,the other one is for name,
when you select the name it will save both name and price to data
<el-select
v-model="item"
value-key="name"
>
<el-option
v-for="(option,index) in OptionsArr"
:key="index"
:label="option.name"
:value="option"
>
{{option.name}}
</el-option>
OptionsArr
[
{
name: "apple" ,
price: 200
},
{
name: "orange" ,
price: 150
}
]
initial data
[
{
name:"",
price:0,
count:0
}
]
data when select apple
[
{
name:"apple",
price:200,
count:0
}
]
And now I want to let user create their own option so I add filterable, allow-create and default-first-option to this el-select
<el-select
v-model="item"
value-key="name"
filterable
allow-create
default-first-option
Now when I input "NewOption" to create an option, it just add a string to the data array, the data becomes:
[
"NewOption"
]
and I want to add a object to the array like this:
[
{
name:"NewOption",
price:0,
count:0
}
]
I tried #change to put an object to the array, but in that way the other el-select which bind the count of the data item cannot work.
<el-select
v-model="item.count"
I resolve most of my problem only few left out of which this one is preventing me to submit the form. I am using Nativescript + vue and without Typescript. how to display the Valueproviders with array list? Here is the code
https://play.nativescript.org/?template=play-vue&id=2oWObE
There was the problem with your data type. As per the documentation Array should have key and label properties. But still if you want id and name then you should try like below.
'valuesProvider': {
key: 'id',
label: 'name',
items: [
{ id: 1121, name: 'Shanghai' },
{ id: 3651, name: 'Lagos' },
{ id: 5213, name: 'Moscow' },
{ id: 6214, name: 'São Paulo' },
{ id: 6985, name: 'Sydney' }
]
};
https://docs.nativescript.org/vuejs/ns-ui/DataForm/dataform-editors-providers
Anyway, I tried that and that was not working for me either then searched for it and relaised that there is an open feature request to support the valuesProvider for picker from JSON metadata. You can vote to support the same feature.
https://github.com/NativeScript/nativescript-ui-feedback/issues/369
Solution
Just get you cityList out of vue data and map your data
https://play.nativescript.org/?template=play-vue&id=2oWObE&v=6
more detailed version with groups
https://play.nativescript.org/?template=play-vue&id=rqK7wO&v=3
How to remove rules message when other event is triggered
return {
'first_name': [
{
required: !this.form.gender,
message: this.form.gender ? '' : Field can not be empty',
trigger: 'blur',
}
],
'last_name': [
{
required: !this.form.gender,
message: 'Field can not be empty',
trigger: 'blur',
}
]
}
If gender is true then messge should be blank how can i achieve this. What currently is working it remove the required asterisk but did not remove message since it will only work when blur trigger. I don't want either it should remove message to if gender is true please guide thanks
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here