I have a list of data and for some of the objects in the data the tag key is empty. When plotting the data in the table they data which has tag key is plotted correctly but for the object which doesn't have the tag key it is being displayed as []. How do I remove that ?
<template v-slot:[`item.tags`]="item">
{{item.tags}}
</template>
Data Sample for a data with tag
{"_id": {"$oid": "60c057823e2a3a534cb1b412"},
"tags": "MMM",
"DateModified": "2021-06-09 13:54:57"}
Data Sample for a data without tag
{"_id": {"$oid": "60c057823e2a3a534cb1b412"},
"tags": [],
"DateModified": "2021-06-09 13:54:57"}
Since you different type of data for each of case when you have data and when you don't have data.
Better go with this
<template v-slot:[`item.tags`]="item">
{{item.tags.length === 0 ? '' : item.tags}}
</template>
If your tags field is an array, you do not want to directly call {{tags}} in your template. You should probably have something like
<span v-for="(tag, i) in tags" :key="i">{{tag}}</span>
You have a problem with your default tags
If i can contain at most 1 tags it should be an empty String instead of an empty Array
your data Sample for a data without tag
{
"_id": {"$oid": "60c057823e2a3a534cb1b412"},
"tags": '',
"DateModified": "2021-06-09 13:54:57"
}
Related
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 have two arrays. I am trying to pluck out a property from one array and use it to find the value of another property in the other way. How to do this? Let me explain:
I have an array of objects that looks like so:
languageCodes:
{
"code1234char3": "mdr",
"name": "Mandar",
},
{
"code1234char3": "man",
"name": "Mandingo",
},
{
// etc...
},
I have another array of objects that looks like so:
divisionLanguages:
[
{
p_uID: 1,
nameLang3Char: 'mdr',
},
{
p_uID: 2,
nameLang3Char: 'man'
},
{
// etc..
}
]
I have a Vue template with an unordered list like so:
<ul v-for="x in divisionLanguages" :key="x.p_uID">
<li>Name: FOO
<li>Language: {{x.nameLang3Char}} - XXX</li> <--how to get 'name' value from 'languageCodes' and place here?
</ul>
Expected output should be:
Name: FOO
Language: mdr - Mandar
Name: BAR
Language: man - Mandingo
I tried to do something like in Vue SFC template (but did not work):
<li>Language: {{ languageName(x.nameLanguage3Char) }}</li>
...
methods: {
languageName(nameLanguage3Char) {
const name = this.divisionLanguages.filter(x => x.code6392char3 === nameLanguage3Char)
return name.name
}
I hope this makes sense of what I am trying to do.
Update: Thanks to #kellen in the comments, I change from filte() to find() like so:
languageName(nameLang3Char) {
const languageName = this.languageCodes.find(
x => x.code1234char3 == nameLang3Char
)
return languageName
},
and in I did:
<li>Language: {{ languageName(x.nameLang3Char).name }}</li>
and it works...but I get error in console:
Error in render: "TypeError: Cannot read property 'name' of undefined"
Have you tried combining these arrays before rendering them? If you were able to combine both objects before creating that list, that would make your life easier. Another thing I noticed is you're using filter, when find might be a better option to return a single value rather than an array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
Considering the following JSON object:
{
"users": [
{"id": "user1"},
{"id": "user2"}
],
"selected": "user1"
}
Is there a way with JSON schema to ensure that the value of the selected property is the id of one of the array items?
Sorry. You cannot do this using JSON Schema.
My data structure looks like this:
city: [
{
foo1: 0,
foo2: "Family",
districts: [
{
bar1: 0,
bar2: "event1",
}
]
},
My v-for looks like this.
<div v-for="district in city.districts" :bar1="district.bar1" :foo="???"></div>
How can I pass the foo1 and foo2 from the parent array as a prop to the div of the v-for?
Given your districts array is available via city.districts, I'd say you can use
<div v-for="district in city.districts"
:bar1="district.bar1" :foo1="city.foo1" :foo2="city.foo2">
</div>
Of course, these values will be the same for each district in a city but that looks like what you want.
Using the following code in my volt file, taken straight from the documentation (present here: http://docs.phalconphp.com/en/latest/reference/tags.html#helpers-to-generate-form-elements).
{{ text_area("comment", "This is the content", "cols": "6", "rows": 20) }}
It shows a textarea with correct name and id, correct column and rows but no content.
Only the first parameter is internally mapped to be the id.
All other parameters need a key.
This works:
{{ text_area("comment", "value":"This is the content", "cols": "6", "rows": 20) }}