I am trying the edit the previously selected option in the select drop down.I am able to show the checked options based on the data driven from the service call, but not able to choose other select option in the drop down.I am using quasar framework and vue.js.
Code:
<q-select
multiple
stack-label="Actions"
v-model="multiSelect"
:options="options"/>
Script:
import {QCheckbox,QSelect} from 'quasar'export
default {components: {QCheckbox,QSelect},
data () {return {
multSelect: [],
options1: [{label: 'X-B',value: 'x-b'},{label: 'RT-Builder',value: 'rt-builder'},{label: 'Com',value: 'com'},{label: 'Max',value: 'max'},{label: 'Runner',value: 'runner'},{label: 'Opto',value: 'opto'}],
....................
created () {
axios.get('http://*********/getDetails').then(response => {
this.multiSelect = response.data
})
}
Can someone help me with this?
The value you store in your component property multiSelect should be an array of the selectable values you want to be checked:
For example (following your data set):
this.multiSelect = ['x-b', 'rt-builder', 'max']
Whereas for "simple" select fields (single choice)
<q-select ... v-model="selectedValue" :options="options" />
you simply do
this.selectedValue = 'identifier'
Related
So from the backend I get a array of objects that look kind of like this
ItemsToAdd
{
Page: MemberPage
Feature: Search
Text: "Something to explain said feature"
}
So i match these values to enums in the frontend and then on for example the memberpage i do this check
private get itemsForPageFeatures(): ItemsToAdd[] {
return this.items.filter(
(f) =>
f.page== Pages.MemberPage &&
f.feature != null
);
}
What we get from the backend will change a lot over time and is only the same for weeks at most. So I would like to avoid to have to add the components in the template as it will become dead code fast and will become a huge thing to have to just go around and delete dead code. So preferably i would like to add it using a function and then for example for the search feature i would have a ref on the parent like
<SearchBox :ref="Features.Search" />
and in code just add elements where the ItemsToAdd objects Feature property match the ref
is this possible in Vue? things like appendChild and so on doesn't work in Vue but that is the closest thing i can think of to kind of what I want. This function would basically just loop through the itemsForPageFeatures and add the features belonging to the page it is run on.
For another example how the template looks
<template>
<div class="container-fluid mt-3">
<div
class="d-flex flex-row justify-content-between flex-wrap align-items-center"
>
<div class="d-align-self-end">
<SearchBox :ref="Features.Search" />
</div>
</div>
<MessagesFilter
:ref="Features.MessagesFilter"
/>
<DataChart
:ref="Features.DataChart"
/>
So say we got an answer from backend where it contains an object that has a feature property DataChart and another one with Search so now i would want components to be added under the DataChart component and the SearchBox component but not the messagesFilter one as we didnt get that from the backend. But then next week we change in backend so we no longer want to display the Search feature component under searchbox. so we only get the object with DataChart so then it should only render the DataChart one. So the solution would have to work without having to make changes to the frontend everytime we change what we want to display as the backend will only be database configs that dont require releases.
Closest i can come up with is this function that does not work for Vue as appendChild doesnt work there but to help with kind of what i imagine. So the component to be generated is known and will always be the same type of component. It is where it is to be placed that is the dynamic part.
private showTextBoxes() {
this.itemsForPageFeatures.forEach((element) => {
let el = this.$createElement(NewMinorFeatureTextBox, {
props: {
item: element,
},
});
var ref = `${element.feature}`
this.$refs.ref.appendChild(el);
});
}
You can use dynamic components for it. use it like this:
<component v-for="item in itemsForPageFeatures" :is="getComponent(item.Feature)" :key="item.Feature"/>
also inside your script:
export default {
data() {
return {
items: [
{
Page: "MemberPage",
Feature: "Search",
Text: "Something to explain said feature"
}
]
};
},
computed: {
itemsForPageFeatures() {
return this.items.filter(
f =>
f.Page === "MemberPage" &&
f.Feature != null
);
}
},
methods: {
getComponent(feature) {
switch (feature) {
case "Search":
return "search-box";
default:
return "";
}
}
}
};
I have a table in my Vuejs project similar to the one that I shared its screenshot above.
My question is; How can I delete a <tr> element from the table when the Delete button of it is pressed for each row?
On the other hand, I want the Add button at the top right of the table to be functional as well. When I click the Add button, I want another <tr> element to be created at the bottom of the table. However, there should be input fields on this element where the user can enter information for each column. After the user has written the information in each column, that row should be added to the table. How can I do that?
if I am correct you are using v-for loop to render all <tr>s
then use the v-for with index like v-for="(obj, index) in objects" to obtain index
to add use Array.prototype.push() to add empty row e.g. objects.push({x: null, y: null})
to remove use Array.prototype.splice() e.g objects.splice(index, 1)
just assign those functionalities to respective buttons.
You could attempt this using a data property in your component and then implement two methods: deleteRow and addRow.
This could be an example code
data() {
return {
dataTable: [
{
id: 1,
code: code1,
description: description1,
},
{
id: 2,
code: code2,
description: description3,
},
...
]
}
}
methods: {
deleteRow(id) {
this.dataTable = this.dataTable.splice(
this.dataTable.findIndex(item => item.id === id)
)
}
addRow(newRow) {
// newRow = {id: 3, code: code3, description: description3}
this.dataTable = [...this.dataTable, newRow]
}
},
Your component will be updated by Vue.js reactivity system.
Probably addRow method should be called from a modal component where you put the input fields to set newRow.
I need some help with a popular vue libraries https://www.npmjs.com/package/vue-tables-2.
I have a filter fixed for the rows but now I need the filtered rows(the objects of rows) stored in an array does anyone know how to achieve this?
I hope this is integrated in the libraries itself because I don't like to fix a hacky solution.
I tried to look it up in the documentation but I couldn't find anything.
Short answer:
You can use the allFilteredData property of the component.
Longer answer using working examples:
You can use a ref on an instance of the table component and then access the allFilteredData property.
Here are two examples:
The code below in available in a full fiddle. Typing "zi" into the filter for example and clcking the "Process Filtered Result" button under the table. Clicking the button results in a method accessing the allFilteredData property.
https://jsfiddle.net/tzdw17qo/
Given this partial code from that fiddle example:
<v-client-table ref="countries" :columns="columns" v-model="data" :options="options">...</v-client-table>
<button #click="handleFilteredResult">Process Filtered Result</button>
<textarea ref="json_dump"></textarea>
A method such as this will have the reference to the filtered data to do something more useful with. This is just a basic working example:
methods: {
/**
* Log out allFilteredData for now for demo only
* #TODO Something specific with the data
*/
handleFilteredResult () {
// log the value of the allFilteredData attribute
console.log({allFilteredData: this.$refs.countries.allFilteredData});
// for example write the json version out to a textarea:
this.$refs.json_dump.value = JSON.stringify(this.$refs.countries.allFilteredData);
}
},
Then another example where listening to the "filter" event:
https://jsfiddle.net/ev645umy/
Html from the fiddle:
<!-- bind to the `filter` event of the component -->
<v-client-table ref="countries" #filter="onFilter" :columns="columns" v-model="gridData" :options="options">
JavaScript from the fiddle:
methods: {
/**
* Log out allFilteredData for now for demo only
* #TODO Something specific with the data
*/
onFilter () {
// as of this writing, the `filter` event fires before the data is filtered so we wait to access the filtered data
setTimeout(() => {
console.log({allFilteredData: this.$refs.countries.allFilteredData});
this.$refs.json_dump.value = JSON.stringify(this.$refs.countries.allFilteredData);
}, 250);
}
},
More info:
https://matanya.gitbook.io/vue-tables-2/properties
https://matanya.gitbook.io/vue-tables-2/events
I am creating a multiple-v-select for users, so they can select multiple options. A computed property filters this selection. I cannot get this to work with multiple options.
Removing the multiple setting from v-select works, but that means that users can only select one option, while they should be able to select more than one.
<template>
<v-select
v-model="selectofficeperks"
:items="officeperks"
multiple />
</template>
<script>
export default {
data () {
return {
officeperks: ['Tafeltennis','Tafelvoetbal', 'Pooltafel']
selectofficeperks:[],
jobs:[],
jobofficeperks:'',
}
},
computed: {
filtered() {
return this.jobs.filter(result => {
let officeperks = this.selectofficeperks;
if (officeperks != '') {
return (officeperks.includes(result.jobofficeperks))
}
}
}
}
}
</script>
When selecting multiple options it does not give a result from the computed filter. The jobs array gets filled by data from Firestore, the values are exactly the same.
If I remove the multiple setting, it does return a value, but I'm guessing that's because it only tries to find one value, which is not what I want. Users have to be able to select multiple values.
I am using checkbox given by vue-element, visit https://element.eleme.io/#/en-US/component/checkbox.
But in edit mode they are not able to select anymore.
Please help me out.
<el-checkbox-group v-model="form.activity_type" size="small">
<el-checkbox-button
v-for="(all_type,index) in all_activity"
:key="index"
:label="all_type.id"
>{{all_type.activity_type_name}}</el-checkbox-button>
</el-checkbox-group>
<el-checkbox-group v-model="form.activity_type" size="small">
<e`enter code here`l-checkbox-button
v-for="(all_type,index) in all_activity"
:key="index"
:label="all_type.id">
{{all_type.activity_type_name}}
</el-checkbox-button>
</el-checkbox-group>
Hi you in order to show checkbox in edit mode you can do it like this:
data() {
return {
form: {
activity_type: []
}
};
}
import {activityData} from "#/api/activity";
2)under method function:
activityData(id).then(response => {
this.form = response.res;
});
3) and then from your controller function you can pass data in this format:
$allData = [];
$allData['activity_type'] = array(1,3);//the ids one you want to show check
return response()->json(["res" => $allData]);