i have this form-select:
<b-form-group
label-cols-sm="2"
label-cols-lg="2"
content-cols-sm
content-cols-lg="10"
v-bind:label="$t('vue.contract_form')"
label-for="contract_form"
v-show="contract"
>
<b-form-select
:options="contract_form"
v-model="form.contract_data.contract_form"
id="contract_form"
:state="validate(form.contract_data.contract_form)"
></b-form-select>
</b-form-group>
the options are:
contract_form() {
return [
{
value: "fixed_term_contract",
text: this.$t("vue.fixed_term_contract"),
},
{
value: "permanent_contract",
text: this.$t("vue.permanent_contract"),
},
];
},
I want when the user chooses for example “apprenticeship”
he only sees the text of fixed_term_contract value or show one option.
how can i do this?
Related
I am trying to create a table where the data can be edited directly in the cells. However, I don't understand how to do this.
I am using Vue.js, Vuexy and vue-good-table 2.21.1. The data is contained in the mediaPlanData variable and is reactive. The table is successfully populating with data and can be modified. However, when I change the data in the cells, this variable does not change. I did not find in the documentation vue-good-table how to do this. Please tell me how can I achieve the desired result?
<vue-good-table
:columns="columns"
:rows="mediaPlanData"
:select-options="{
enabled: true,
selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
selectionInfoClass: 'custom-class',
selectionText: 'rows selected',
clearSelectionText: 'clear',
disableSelectInfo: true, // disable the select info panel on top
selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
}"
#on-selected-rows-change="onRowClick"
>
<template slot="table-row" slot-scope="props">
<span>
<b-form-input v-model="props.row[props.column.field]"
type="text"
></b-form-input>
</span>
</template>
</vue-good-table>
data() {
return {
pageLength: 10,
columns: [
{
label: 'Channel Code',
field: 'channelCode',
},
{
label: 'Product',
field: 'product',
}
],
mediaPlanData: [] //[ {"channelCode": "P230", "product": "Test"}, {"channelCode": "P230", "product": "Test4"}, {"channelCode": "P230", "product": "Test45"}, {"channelCode": "Р230", "product": "Test2"}]
}
}
methods: {
onRowClick(params) {
console.log('onRowClick' + JSON.stringify(params))
this.$toast({
component: ToastificationContent,
props: {
title: `Hello user! You have clicked on row ${params.selectedRows.product}`,
icon: 'UserIcon',
variant: 'success',
},
})
}
}
I have solved this problem.
Added to b-form-input
#change="changeCell(props.row[props.column.field], props.column.field, props.row.originalIndex)"
And adden method
changeCell(changedData, column, row) {
this.mediaPlanData[row][column] = changedData
},
Here is the code I write to get value form API, Is it possible to send the two parameter like i send in the following example.
async getMainAssignmentsList(schoolId,lessonId) {
var getLearningStrategiesUrl =
this.apiBasedUrl + 'Assignment/' + schoolId +'/'+ lessonId + '/GetMainAssignment'
await this.axios
.get(getLearningStrategiesUrl)
.then(response => {
this.mainAssignmentList = response.data
})
.catch(function (error) {
console.log(error)
})
}
My requirement is that I need to select First 'form.schoolId' and after that 'form.lessonId' and on the basis of combined want to show data but, here is am unable to send parameter in the API.
<div class="col-sm-12">
<b-form-select v-model="form.schoolId" class="mt-2" placeholder="Please select an option" #input="getMainAssignmentsList(form.schoolId)">
<option :value="null">Select school</option>
<option v-for="School in allSchoolsList" :value="School.id" :key="School.id">{{School.schoolName}}</option>
</b-form-select>
</div>
<div class="col-sm-12" >
<b-form-select v-model="form.lessonId" class="mt-2" #input="getMainAssignmentsList(form.lessonId)">
<option :value="null">Please select Lesson</option>
<option v-for="Lesson in allLessons" v-bind:value="Lesson.id" :key="Lesson.id">{{Lesson.name}}</option>
</b-form-select>
</div>
<!--- Here want to show value in drop down --->
<div class="col-sm-12" >
<b-form-select v-model="parentAssignmentId" class="mt-2" >
<option :value="null">Please select Main Assignment</option>
<option v-for="MainAssignment in mainAssignmentList" v-bind:value="MainAssignment.id" :key="MainAssignment.id">{{AssignmentTypes.name}}</option>
</b-form-select>
</div>
Currently my URL is showing following value:
Request URL:http://localhost:51711/api/Assignment/undefined/undefined/GetMainAssignment
You can always try something like this and let bootstrap-vue take care of most of the heavy lifting.
<template>
<b-container>
<b-row>
<b-col sm="12">
<b-form-select
v-model="selectedSchoolId"
class="mt-2"
placeholder="Please select an option"
:options="allSchoolsList"
></b-form-select>
</b-col>
<b-col sm="12">
<b-form-select v-model="selectedLessonId" class="mt-2" :options="allLessons"></b-form-select>
</b-col>
<b-col sm="12">
<b-form-select
v-model="parentAssignmentId"
class="mt-2"
placeholder="Please select Main Assignment"
:options="mainAssignmentList"
></b-form-select>
</b-col>
<b-col>
<b-btn #click="getMainAssignmentsList">Submit</b-btn>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
selectedLessonId: null,
selectedSchoolId: null,
parentAssignmentId: null,
allSchoolsList: [
{ value: null, text: "Please select an option" },
{ value: "schoola", text: "School A" },
{ value: "schoolb", text: "School B" },
{ value: "schoolc", text: "School C" },
{ value: "schoold", text: "School D" }
],
allLessons: [
{ value: null, text: "Please select an option" },
{ value: "lessona", text: "Lesson A" },
{ value: "lessonb", text: "Lesson B" },
{ value: "lessonc", text: "Lesson C" },
{ value: "lessond", text: "Lesson D" }
],
mainAssignmentList: [
{ value: null, text: "Please select an option" },
{ value: "assignmenta", text: "Assignment A" },
{ value: "assignmentb", text: "Assignment B" },
{ value: "assignmentc", text: "Assignment C" },
{ value: "assignmentd", text: "Assignment D" }
]
};
},
methods: {
getMainAssignmentsList() {
let apiArgs = {
lesson: this.selectedLessonId,
school: this.selectedSchoolId
};
console.log(apiArgs);
//Call API using apiArgs
}
}
};
</script>
I removed the options tags and changes some divs to b-col tags. If you want to manual make your own options tags you will need to use the correct tag like this example taken straight from the docs:
<b-form-select-option value="C">Option C</b-form-select-option>
I'd like to combine two separate Vuetify functionalities into one:
https://vuetifyjs.com/en/components/data-tables --> Expandable Rows Table (but ideally with more than one data row upon expansion)
https://vuetifyjs.com/en/components/expansion-panels --> External Control Expansion Panel
Ultimately, the goal is to have a table that looks like this (Grouping Table with expand/collapse all one): https://codepen.io/lzhoucs/pen/aadaJx
The issue with this table is that despite fitting the code into my project, certain functionalities don't work -- such as clicking to open and close a table. I believe this is due to this being a different version of Vue than what I'm using, which is the most up to date, as I spotted some old styles.
I've tried a bunch of things, but my most successful attempt is creating a table within a table. Here is the code for that:
<template>
<v-container>
<v-data-table
:headers="headers"
:items="projects"
:expanded="expanded"
item-key="name"
show-expand
class="elevation-1"
#click:row="clicked"
>
<template v-slot:expanded-item="{ headers }">
<td :colspan="headers.length">
<v-data-table
:headers="peopleHeaders"
:items="people"
item-key='name'
hide-default-footer
class='elevation-1'>
<template slot="item" slot-scope="props">
<tr>
<td>{{props.item.name}}</td>
<td>{{props.item.major}}</td>
<td>{{props.item.preference}}</td>
<td>
<v-btn color='success'>Accept</v-btn>
<v-btn color='error'>Reject</v-btn>
</td>
</tr>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
</v-container>
</template>
<script>
export default {
data() {
return {
expanded: [],
headers: [
{
text: 'Name',
align: 'left',
sortable: true,
value: 'name',
},
{ text: 'Status', value: 'Status' },
],
projects: [
{
name: '#this is the project they applied to',
Status: 'Status: Pending',
},
],
peopleHeaders: [
{
text: 'Name',
align: 'left',
sortable: true,
value: 'name',
},
{
text: 'Major',
align: 'left',
sortable: true,
value: 'major',
},
{
text: 'Preference',
align: 'left',
sortable: true,
value: 'preference',
},
],
people: [
{
name: 'BORB',
major: 'SWE',
preference: 'idk',
},
],
};
},
methods: {
clicked(value) {
this.expanded.push(value);
},
},
};
</script>
Any advice for how to combine the two features to achieve the table desired would be greatly appreciated.
I would like to add HTML img attribute to the b-form-select component of boostrap-vue inside to load img with each option?
<template>
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>
</template>
<script>
export default {
data() {
return {
selected: null,
options: [
{ value: null, text: 'Please select some item' },
{ value: 'a', text: 'This is First option' },
{ value: 'b', text: 'Default Selected Option' },
{ value: 'c', text: 'This is another option' },
{ value: 'd', text: 'This one is disabled', disabled: true }
]
}
}
}
</script>
It seems bootstrap-vue and bootstrap have different implementations on select components. And bootstrap-vue doesn't support thumbnails and it uses native select and options elements which makes impossible to set background image. Instead you can emulate dropdown component like select as below :
Template
<template>
<div class="hello">
<div class="back"></div>
<b-dropdown :text="selected ? selected.text : 'Please select some item'">
<b-dropdown-item
:disabled="option.disabled"
#click="select(option)"
v-for="option in options"
:key="option.value"
>
<div>
<img :src="option.src">
{{option.text}}
</div>
</b-dropdown-item>>
</b-dropdown>
</div>
</template>
Component
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {
return {
selected: null,
options: [
{
value: null,
text: "Please select some item",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "a",
text: "This is First option",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "b",
text: "Default Selected Option",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "c",
text: "This is another option",
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
},
{
value: "d",
text: "This one is disabled",
disabled: true,
src: "https://mdn.mozillademos.org/files/7693/catfront.png"
}
]
};
},
methods: {
select(option) {
console.log(option);
this.selected = option;
}
}
};
Sandbox
Just like Bootstraps's custom select component BootstrapVue's <b-form-select> is based on <select>, which by HTML5 standards does not support complex HTML content in <option> elements.
If you need complex content (i.e. images, etc) in the options, you would need to create a custom component (probably based on <b-dropdpwn>) that allows you to use custom HTML5 in the "options" (dropdown items) and emulate the native select features.
I'm trying to create a simple vue that binds the selected item from a select/dropdown to a property in the vm.
I haven't been able to find a clear and simple example of how this is down when using an options collection that is also in the view model.
<template>
<div>
<h1>Select box</h1>
<b-dropdown id="ddCommodity"
name="ddCommodity"
v-model="ddTestVm.ddTestSelectedOption"
text="Select Item"
variant="primary"
class="m-md-2" v-on:change="changeItem">
<b-dropdown-item disabled value="0">Select an Item</b-dropdown-item>
<b-dropdown-item v-for="option in ddTestVm.options":selected="option.value == 'LME/ST_TNI_ALL'":value="option.value">{{option.text}}</b-dropdown-item>
</b-dropdown> <span>Selected: {{ ddTestVm.ddTestSelectedOption }}</span>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
someOtherProperty: null,
ddTestVm: {
originalValue: [],
ddTestSelectedOption: "Value1",
disabled: false,
readonly: false,
visible: true,
color: "",
options: [
{
"value": "Value1",
"text": "Value1Text"
},
{
"value": "Value2",
"text": "Value2Text"
},
{
"value": "Value3",
"text": "Value3Text"
}
]
}
}
},
methods: {
changeItem: async function () {
//grab some remote data
try {
let response = await this.$http.get('https://www.example.com/api/' + this.ddTestVm.ddTestSelectedOption + '.json');
console.log(response.data);
this.someOtherProperty = response.data;
} catch (error) {
console.log(error)
}
}
},
watch: {
},
async created() {
}
}
</script>
<style>
</style>
Regardless of what i've tried i cannot get the selected value in the dropdown to change the ddTestSelectedOption property of the vm.
Could anyone assist on this issue?
Thanks.
b-dropdown in bootstrap-vue does not support v-model. As the documentation states:
Dropdowns are toggleable, contextual overlays for displaying lists of
links and actions in a dropdown menu format.
In other words, b-dropdown is essentially a UI component for displaying a menu or similar set of options.
I expect what you want is b-form-select.
That said, you could add a click handler to the options that sets the value.
<b-dropdown-item v-for="option in ddTestVm.options"
:key="option.value"
:value="option.value"
#click="ddTestVm.ddTestSelectedOption = option.value">
Here is a working example.
I thing you need b-form-select
<template>
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
<b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>
</template>
<script>
export default {
data() {
return {
selected: null,
options: [
{ value: null, text: 'Please select an option' },
{ value: 'a', text: 'This is First option' },
{ value: 'b', text: 'Selected Option' },
{ value: { C: '3PO' }, text: 'This is an option with object value' },
{ value: 'd', text: 'This one is disabled', disabled: true }
]
}
}
}
</script>
Only b-form-select can achieve the selected value behaviour.
Non-Selected Value Preview:
Selected Value Preview:
Sample Code:
<template>
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
</div>
</template>
<script>
export default {
data() {
return {
selected: null,
options: [
{ value: 1, text: 'Please select an option' },
{ value: 2, text: 'This is First option' },
{ value: 3, text: 'Selected Option' }
]
}
}
}
</script>
Wanted to leave a comment, but code example looks pale there :)
Yes, b-dropdown does not properly support Vue model, but it doesn't have to.
For those still interested in exactly dropdown (f.e. because it looks fancier), consider:
<b-dropdown :text="$i18n.locale" >
<b-dropdown-item v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang" v-on:click="$i18n.locale = lang;" >{{lang}}</b-dropdown-item>
</b-dropdown>
Slecifically v-on:click, which can handle the model value change for you.