How to group letters of alphabet and render to template in vue - vue.js

I have a vuejs data like this:
new Vue({
el: "#app",
data() {
return {
alpha: [{
artist: "Aa"
}, {
artist: "Az"
},
{
artist: "Ab"
},
{
artist: "Ba"
},
{
artist: "Bb"
},
{
artist: "Bc"
},
{
artist: "Da"
},
{
artist: "Db"
}, {
artist: "Dc"
}, {
artist: "Dx"
},
]
}
}
})
What I want to do is simple to take the first letters of artist: A, B, C, D and create an array from them. After that I want to group all the artists by their index. So, the output would be:
A: (3) ["Aa", "Az", "Ab"]
B: (3) ["Ba", "Bb", "Bc"]
D: (4) ["Da", "Db", "Dc", "Dx"]
I can do this in my code, see below but the template isn't rendering it.
Here is the fiddle https://jsfiddle.net/fcas1wke/ for that works, you can see the console for the output

The array doesn't render because you are using non-numeric indexes on your array. This is described in more detail here, but basically non-numeric indexes can't be iterated over so they won't appear in the output.
A more standard way to handle this would be to use an object instead of an array. Here's a working version of your component:
Vue.component("alphabets", {
props: ['data'],
computed: {
stack() {
const result = {};
this.data.forEach(function(element) {
if (Array.isArray(result[element.artist[0]])) {
result[element.artist[0]].push(element.artist);
} else {
result[element.artist[0]] = [element.artist];
}
});
return result;
},
},
template: `<div>{{ stack }}</div>`,
});
Note this version uses a computed property instead of modifying the component's state on created.

Related

how to pass i18n data $t as prop to a component

in a normal way with out translation but i want to translate the two object array and bind into a component
<InfoNews
v-for="infonew in infonews"
:id="infonew.id"
:title="infonew.title"
:content="infonew.content"
/>
data() {
return {
infonews: [
{
id: "01",
title: "what we do",
content:"industke aecimen book. ",
},
{
id: "02",
title: "our mission",
content:"ggdddg",
},
],
};
Make infonews a computed property. The title and content of each should be the translation keys.
export default {
computed: {
infonews() {
return [
{
id: "01",
title: this.$t("what we do"),
content: this.$t("industke aecimen book"),
},
{
id: "02",
title: this.$t("our mission"),
content: this.$t("ggdddg"),
},
]
};
}
}

vue3 nested search filter

Please help to return filteredList() based on comparing for similarity input search with key 'info': array.
It always says its undefined.
export default {
data() {
return {
search: "",
postList: [
{
title: "hello",
info: ["one", "two", "three", "four"],
},
{
title: "goodbye",
info: ["five", "six"],
},
],
};
},
computed: {
filteredList() {
return this.postList.filter((item) => {
return item.info.includes(this.search);
});
},
},
};
</script>

Map array inside computed property

So I wanted to see if I can get some guidance from the community if there is a better way to approach this:
So I have the following vue.js app:
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
const default_apps = [
{
'post_title': 'Excel',
}, {
'post_title': 'Word',
}, {
'post_title': 'SharePoint',
}];
return {
available_list: [],
selected_list: default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
}),
}
},
computed: {
dragOptions() {
// Pass in additional <draggable> options inside the return for both lists.
return {
tag: 'div',
group: 'o365apps',
disabled: !this.editable,
ghostClass: "ghost",
};
},
},
});
The selected_list returns the following items:
I was told that it's bad practice to do array mapping inside the data return, but to instead map inside the computed call - Could someone lead me in the right direction and just see if my code makes sense?
I tried defining an empty array as shown below:
return {
available_list: [],
selected_list:[],
}
& then inside the computed property, I tried accessing it using the following return but wasn't getting any data back:
selected_list() {
return this.default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
});
},
All help is appreciated - Thanks a bunch!
your are almost there except for a few details:
It's ok to map data inside data as long as you put them inside the return object literal data() { return { default_apps: [] } }.
Once default_apps is inside the return object of data, you can access the data inside of it from a computed property using the this keyword: this.default_apps.map()...
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
return {
default_apps: [
{ post_title: 'Excel' },
{ post_title: 'Word' },
{ post_title: 'SharePoint'}
],
available_list: [],
}
},
computed: {
selected_list() {
return this.default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
});
},
dragOptions() {
// Pass in additional <draggable> options inside the return for both lists.
return {
tag: 'div',
group: 'o365apps',
disabled: !this.editable,
ghostClass: "ghost",
};
},
},
});

How to convert a html button into native script?

This is the html code, this button is used to filter food by name:
So the name of the food should be displayed as a button so that users can filter the option.
<button id="filterme" v-for="f in filterFood"
#click="$chooseFilter(f)">Filter food by {{f}}</button>
This is the script code:
const app = new Vue({
el: "#app",
data: {
thisFood: [], //food array
newFood: {
name: "",
price: "",
cuisine: ""
},
filterFood: ["null", "pizza", "chips", "rice", "chocolate", "salad"]
methods() {
if (localStorage.getItem("thisFood")) {
try {
this.thisFood= JSON.parse(localStorage.getItem("thisFood"));
} catch (e) {
localStorage.removeItem("newFood");
}
this.thisFood.push(this.newFood); //add new food
this.newFood= {
name: "",
price: "",
cuisine: "",
}
}
},
chooseFilter(filter) {
this.filter = filter;
},
I tried using a button it's not working.
<button text:"filterme" for =" f in filterFood" #tap="chooseFilter(f)">
Filter food by {{f}} </button>
Please take another look at the Vue documentation: https://v2.vuejs.org/v2/guide/components.html
Maybe you're not sharing all your code, but the structure is way off.
Your methods function (which should be an object) is inside your data object.
Besides that you're missing parentheses .
Start with a valid structure and syntax:
const app = new Vue({
el: "#app",
data: {
thisFood: [], //food array
newFood: {
name: "",
price: "",
cuisine: "",
},
filterFood: ["null", "pizza", "chips", "rice", "chocolate", "salad"]
},
methods: {
chooseFilter(filter) {
//
}
},
});

formatting cell values in datatables

Using this as an example how do I control the format of the values in the cells?
for example, how would I format the Extn. column to read 5,407 or 54.07?
Name Position Office Extn. Start date Salary
Airi Satou Accountant Tokyo 5407 $2008/11/28 $162,700
I have been searching here and here but I can't quite work it out. can anyone advise?
I have tried something like this, but am having no success:
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
"aoColumnDefs": [ {
"aTargets": [ 4 ],
"mRender": function (data, type, full) {
//var formmatedvalue=data.replace("TEST")
//return formmatedvalue;
return '$'+ data;
}
}]
} );
} );
Use the columns.render option.
Either with the built-in helper, to get a thousand seperator (5,407):
{
title: "Extn.",
render: $.fn.dataTable.render.number(',', '.', 0, '')
},
JSFiddle example
Or do it yourself with a custom function (54.07):
{
title: "Extn.", render: function (data, type, row) {
return data / 100;
}
},
JSFiddle example