Develop Reference

Using t translation on props in Vue with vue i18n

I would like to translate the titles that are passed to my component via props. However I assume because my strings are being passed via props they are not being translated like the rest of my code. Below you will find my current 2 components that I am working with:
Parent Component:
`<setting-section
:title="$t('Random Text 1')"
:description="$t('Random Text 2')"
>`
In the Child:
`<template>
<div class="flex grid w-full">
<div class="divider mr-4 mt-5" />
<div class="header col-2">
<div class="title text-primary">{{ title }}</div>
<div class="description text-xs">{{ description }}</div>
</div>
<div class="flex col-10" v-if="!isLoading">
<slot />
</div>
<div class="flex col-10" v-else>
<Skeleton height="5rem" />
</div>
</div>
</template>
<script>
export default {
name: 'Menu',
props: {
title: {
type: String,
default: '',
},
description: {
type: String,
default: '',
},
},
};
</script>`
How ever if I do add the below variation it obviously wont work.
`<template>
<div class="flex grid w-full">
<div class="header col-2">
<div class="title text-primary">{{ $t('title')}} </div>
<div class="description text-xs">{{ description }}</div>
</div>
</div>
</template>`

Your both the solutions should work as we always configured VueI18n at global level. Hence, translation literals always accessible from any nested component.
Live Demo as per both the use cases :
Vue.component('child-one', {
props: ['childmsg'],
template: '<p>{{ childmsg }}</p>'
});
Vue.component('child-two', {
template: `<p>{{ $t('message') }}</p>`
});
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'ja',
fallbackLocale: 'en',
messages: {
"ja": {
"message": "こんにちは、世界"
},
"en": {
"message": "Hello World"
}
}
});
new Vue({
el: "#app",
i18n,
data() {
return {
locale: "ja"
}
},
watch: {
locale(newLocale) {
this.$i18n.locale = newLocale;
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.8/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-i18n#8.8.2/dist/vue-i18n.min.js"></script>
<main id="app">
<div>
<label><input type="radio" value="ja" v-model="locale" />Japanese</label>
<label><input type="radio" value="en" v-model="locale" />English</label>
</div>
<h3>Passing translated string from parent</h3>
<child-one :childmsg="$t('message')"></child-one>
<h3>Transaltions happens in child component itself</h3>
<child-two></child-two>
</main>

How to filter checkbox by query api in vuejs?

I'm making a website that has a filter function before pouring data out... Currently, I'm doing the pretty stupid way of dumping all the data out and putting it in an object and then filtering. I want when I click on it, it will call the api to return according to the params that I pass, but the initial default is that the checkbox is in the all box, it still returns all. Here is my code part....
Template:
<template>
<div class="job">
<div class="container recruit flex-wrap">
<div class="job-filter">
<h3>
Ngành nghề
<img
id="icon-filter"
#click="showfilter"
:style="{ display: display.btn_show_filter }"
src="../assets/recruit/angle-down-svgrepo-com.svg"
alt=""
/>
<img
id="icon-close-filter"
:style="{ display: display.btn_close_filter }"
#click="closefilter"
src="../assets/recruit/close-svgrepo-com.svg"
alt=""
/>
</h3>
//Handle Filter
<div
class="radio-group"
id="group-filter"
:style="{ display: display.group_filter }"
>
<div
class="radio-check"
v-for="(check, index) in checks"
#click="selectFilter(check)"
:key="index"
>
<input
type="radio"
:id="index"
name="fav_language"
:value="check"
v-model="selected"
/>
<label :for="check">{{ check }}</label
><br />
</div>
</div>
</div>
//End Handle filter
<div class="search">
<div class="search-top flex-wrap">
<h5>{{ totalJobs }} {{ localised("countRecruit") }}</h5>
<div class="search-input">
<input
type="search"
placeholder="Nhập tên vị trí công việc"
v-model="search"
/>
<button #click="searchJob">
<img src="../assets/recruit/search.svg" alt="" />
</button>
</div>
</div>
<div
id="jobs"
class="job-item"
v-for="(item, index) in jobs"
:key="index"
:per-page="perPage"
:current-page="currentPage"
>
<router-link
tag="a"
:to="{ name: 'Detail', params: { id: item.id } }"
>
<h3 class="mleft-27">{{ item.Name }}</h3>
</router-link>
<div class="job-info flex-wrap">
<div class="job-info-left pleft-27 flex-wrap">
<div>
<img src="../assets/recruit/years.svg" alt="" />
<b>{{ item.Exprerience }}</b>
</div>
<div>
<img src="../assets/recruit/luong.svg" alt="" />
<b>{{ item.Salary }}</b>
</div>
<div>
<img src="../assets/recruit/diadiem.svg" alt="" />
<b>{{ item.Headequarters }}</b>
</div>
</div>
<div>
<h6>{{ momentTime(item.updatedAt) }}</h6>
</div>
</div>
<div class="info-job flex-wrap">
<div class="list-info-job">
<li>{{ item.Content }}</li>
</div>
<router-link
tag="a"
:to="{ name: 'Detail', params: { id: item.id } }"
>
<button class="btn-detail">Xem chi tiết</button>
</router-link>
</div>
</div>
<h3 class="not-found" v-show="showNoData">Not Found</h3>
</div>
</div>
</div>
</template>
And here is the js logic I'm dealing with:
<script>
import "../assets/style.css";
import "../assets/job.css";
import job from "../locales/lang";
import request from "#/utils/request";
import moment from "moment";
export default {
name: "jobs",
components: {},
data() {
return {
totalJobs: null,
tickTime: "",
currentPage: 1,
showPag: true,
showNoData: false,
perPage: 4,
search: "",
page: "",
noData: [],
checks: [
"All",
"Developer",
"Tester",
"Designer",
"Support",
"Marketing",
"Other",
],
jobinfos: [],
showJobs: [],
selected: "All",
};
},
computed: {
},
watch: {
// selected(newVal) {
// if (newVal === "All") {
// return this.jobinfos;
// } else {
// return this.jobinfos.filter((i) => i.Genres === newVal);
// }
// },
},
async mounted() {
//API
this.getJobs();
// event enter
var self = this;
window.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
self.searchJob();
}
});
},
methods: {
//Call api job information by locale
async getJobs() {
await request
.get(`jobs?_locale=${this.$route.params.locale}`)
.then((response) => {
this.jobinfos = response.data;
this.showJobs = response.data;
this.totalJobs = response.data.length;
})
.catch((e) => {});
},
//Filter item jobs
selectFilter(item) {
this.selected = item;
if (this.selected == "All") {
this.showJobs = this.jobinfos;
} else {
this.showJobs = this.jobinfos.filter((i) => i.Genres === this.selected);
if (this.showJobs.length > 0) {
this.showPag = true;
this.showNoData = false;
} else {
this.showPag = false;
this.showNoData = true;
}
}
},
// method search by filter
},
};
</script>
As for the backend, I'm using 3rd party cms, it probably already provides enough query params for me, please give me some pseudocode or a way so that when I click on the checkbox, it will call the api to return the records according to the check box ^^ thanks

How to make a clone of the array object with new id and same name?

I'm new at vue3 and javascript. I have 2 lists and drag and drop system. The problem is when I drag and drop component from one list to another, I increase an id by 1, but I can't get the name of dragged object and display it. The problem displayed at methods in method "cloneComponent"
<template>
<div class="full-zone">
<div class="components">
<h3>Компоненты бота:</h3>
<draggable
class="dragArea"
:list="list1"
:group="{ name: 'people', pull: 'clone', put: false }"
:clone="cloneComponent"
#change="log"
item-key="id"
>
<template #item="{element}">
<div class="list-group-item">
{{ element.name }}
</div>
</template>
</draggable>
</div>
<div class="constructor">
<h3>Конструктор</h3>
<draggable
class="constructor-list"
:list="list2"
group="people"
#change="log"
item-key="id"
>
<template #item="{ element, index }">
<div class="list-group-item">
{{ element.name }}
<div>
<input type="text" class="input" v-model="element.text" placeholder="Введите текст компонента" />
<span #click="remove(index)" class="remove">x</span>
</div>
</div>
</template>
</draggable>
</div>
<div>
<button class="btn">Сгенерировать бота</button>
</div>
<rawDisplayer class="col-3" :value="list1" title="List 1" />
<rawDisplayer class="col-3" :value="list2" title="List 2" />
</div>
</template>
<script>
import draggable from "vuedraggable";
let idGlobal = 4;
export default {
name: "clone",
display: "Clone",
order: 2,
components: {
draggable
},
data() {
return {
list1: [
{ name: "Сообщение", text: "", id: 1 },
{ name: "Заметка", text: "", id: 2 },
{ name: "Кнопка", text: "", id: 3 },
],
list2: []
};
},
methods: {
log: function(evt) {
window.console.log(evt);
},
cloneComponent() {
return {
id: idGlobal ++,
}
},
remove(idx) {
this.list2.splice(idx, 1);
},
}
};
</script>
How to return not only "id", but "name" at the same time? Please help.

You need to send the item to the other list
// tolist = can be 1 or 2
cloneComponent(item, tolist) {
if (tolist === 2) {
this.list2.push(item)
} else {
this.list1.push(item)
}
}

VueDraggable send request to DB while drag and drop

I need a help for vuedraggable component. I have three columns. (Photo inserted) I want to drag BoardUserCard between columns and want to send PUT request to database for changing "lead_status_id" related to column dropped. How can I achieve this ? I can not find any example about apis in documentation.
<template>
<div class="board">
<div class="boards">
<div class="boards-cards leads">
<div class="board-card-header ">
<h3>
Leads
</h3>
<span>
{{ allLeads.length }}
</span>
</div>
<draggable
ghost-class="ghost"
:list="allLeads"
class="board-card-body"
:options = "{group:allLeads}"
group="leads"
#change="handleChange"
>
<BoardUserCard
v-for="item in allLeads"
:key="item.name"
:name="item.name"
:email="item.email"
:img="item.img"
:status="item.status"
/>
</draggable>
</div>
<div class="boards-cards contacted">
<div class="board-card-header ">
<h3>
Contacted
</h3>
<span>
{{ contactedLeads.length }}
</span>
</div>
<draggable
ghost-class="ghost"
:list="contactedLeads"
class="board-card-body"
:options = "{group:contactedLeads}"
group="leads"
#change="handleChange"
>
<BoardUserCard
v-for="item in contactedLeads"
:key="item.name"
:name="item.name"
:email="item.email"
:img="item.img"
:status="item.status"
/>
</draggable>
</div>
<div class="boards-cards converted">
<div class="board-card-header ">
<h3>
Converted
</h3>
<span>
{{ convertedLeads.length }}
</span>
</div>
<draggable
ghost-class="ghost"
:list="convertedLeads"
class="board-card-body"
:options = "{group:convertedLeads}"
group="leads"
#change="handleChange"
>
<BoardUserCard
v-for="item in convertedLeads"
:key="item.name"
:name="item.name"
:email="item.email"
:img="item.img"
:status="item.status"
/>
</draggable>
</div>
</div>
</div>
</template>
<script>
import BoardUserCard from "#/components/BoardUserCard.vue";
import draggable from "vuedraggable";
export default {
name: "Dashboard",
components: {
BoardUserCard,
draggable,
},
data() {
return {
showModal: false,
allLeads: [
{
name: "Richard",
email: "Richard#gmail.com",
img: "avatar-small.svg",
status: "all"
},
{ name: "Rachael", email: "Rachael#gmail.com", img: "leads.svg", status: "all" },
{ name: "Matt", email: "Matt#gmail.com", img: "user-avatar.svg",status: "all" },
{ name: "Brad", email: "Brad#gmail.com", img: "leads.svg", status: "all"},
],
contactedLeads: [
{
name: "Jeniffer",
email: "Jeniffer#gmail.com",
img: "avatar-small.svg",
status: "contacted"
},
],
convertedLeads: [
{ name: "Mike", email: "Mike#gmail.com", img: "leads.svg", status: "converted" },
],
};
},
methods: {
openModal() {
this.showModal = true;
},
closeModal() {
this.showModal = false;
},
handleChange(event){
console.log(event)
}
},
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

All I need to add data attribute in component data-id="4"
<draggable
ghost-class="ghost"
:list="convertedLeads"
class="board-card-body"
:options = "{group:convertedLeads}"
group="leads"
#end="handleChange"
data-id="4"
>
And access data-id attribute in handleChange function
handleChange(event){
console.log(event.from.getAttribute("data-id"))
console.log(event.to.getAttribute("data-id"))
}
`

Vue.JS - How to have a button perform two separate actions on the same parent element?

On parent I have:
<template>
<b-container>
<b-modal id="uw-qb-add-item-modal"
ref="uw-qb-add-item-modal"
title="Enter Item Number"
#ok="handleNewItem">
<form #submit.stop.prevent="handleSubmit">
<b-form-input type="text"
placeholder="Enter the item number" />
</form>
</b-modal>
<div class="row mb-3">
<div class="col">
<nuxt-link to="/">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
Quote Build List
</nuxt-link>
</div>
</div>
<div class="row mb-3">
<div class="col-md"><h2>Quote Build <b-badge :variant="buildBadgeVariant">{{ buildBadgeText }}</b-badge></h2></div>
<div class="col-md text-right text-success"><h3><i class="fa fa-usd" aria-hidden="true"></i> {{ buildTotal | formatDollars }}</h3></div>
</div>
<div class="row mb-3">
<div class="col-md form-group">
<build-customer :buildNumber="buildNumber"/>
</div>
<div class="col-md form-group">
<build-address :buildNumber="buildNumber" />
</div>
<div class="col-md form-group">
<build-contact :buildNumber="buildNumber" />
</div>
<div class="col-md form-group">
<label for="uw-qb-due-date">Due Date</label>
<date-picker v-model="dueDate"/>
</div>
</div>
<div class="row mb-3">
<div class="col-sm form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" v-model="internal" />
Internal Quote
</label>
</div>
<build-requester-id v-if="internal" :buildNumber="buildNumber"/>
</div>
<div class="col-sm form-group">
<label>RFQ Number</label>
<b-form-input type="text" v-model="rfqNumber"/>
</div>
<div class="col-sm form-group">
<div class="form-check">
<label class="form-check-label mb-3">
<input class="form-check-input" type="checkbox" v-model="update" />
Quote Update
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" v-model="correctiveAction" />
Corrective Action
</label>
</div>
</div>
<div class="col-sm form-group">
<label>Request Date</label>
<date-picker v-model="requestDate" />
</div>
</div>
<div class="row mb-3">
<div class="col-md text-right">
<b-btn variant="primary"
v-b-toggle="editId"
#click="newEditItem">
<i class="mr-1 fa fa-plus" aria-hidden="true"></i>
Add Item
</b-btn>
</div>
</div>
<b-collapse :id="editId">
<build-item-edit #doOnEmit="expand" :buildNumber="buildNumber"
:itemNumber="editItemNumber"/>
</b-collapse>
<build-item-list #edit="edit" :buildNumber="buildNumber" />
<build-breakdown-edit :buildNumber="buildNumber" :breakdownNumber="editBreakdownNumber"/>
<build-breakdown-list :buildNumber="buildNumber"/>
</b-container>
</template>
<script>
import BuildCustomer from '#/components/buildCustomer'
import BuildAddress from '#/components/buildAddress'
import BuildContact from '#/components/buildContact'
import BuildRequesterId from '#/components/buildRequesterId'
import BuildItemEdit from '#/components/buildItemEdit'
import BuildItemList from '#/components/buildItemList'
import BuildBreakdownEdit from '#/components/buildBreakdownEdit'
import BuildBreakdownList from '#/components/buildBreakdownList'
import DatePicker from '#/components/datePicker'
export default {
data () {
return {
editItemNumber: null,
editBreakdownNumber: null
}
},
components: {
'build-customer': BuildCustomer,
'build-address': BuildAddress,
'build-contact': BuildContact,
'build-requester-id': BuildRequesterId,
'build-item-edit': BuildItemEdit,
'build-item-list': BuildItemList,
'build-breakdown-edit': BuildBreakdownEdit,
'build-breakdown-list': BuildBreakdownList,
'date-picker': DatePicker
},
computed: {
// nextItemNumber () {
// const itemNumbers = this.$store.getters['build/item/numbers'](this.buildNumber)
// return Math.min.apply(null, itemNumbers) - 1
// },
editId () {
return this.idGen('edit-item-collapse')
},
dueDate: {
get () {
return this.build.dueDate
},
set (value) {
this.$store.commit('build/setDueDate', { buildNumber: this.buildNumber, dueDate: value })
}
},
requestDate: {
get () {
return this.build.requestDate
},
set (value) {
this.$store.commit('build/setRequestDate', { buildNumber: this.buildNumber, requestDate: value })
}
},
internal: {
get () {
return this.build.internal
},
set (value) {
this.$store.commit('build/setInternal', { buildNumber: this.buildNumber, internal: !!value })
}
},
update: {
get () {
return this.build.update
},
set (value) {
this.$store.commit('build/setUpdate', { buildNumber: this.buildNumber, update: !!value })
}
},
correctiveAction: {
get () {
return this.build.correctiveAction
},
set (value) {
this.$store.commit('build/setCorrectiveAction', { buildNumber: this.buildNumber, correctiveAction: !!value })
}
},
requesterId: {
get () {
return this.build.requesterId
},
set (value) {
if (value === null || this.$store.getters.employees.hasOwnProperty(value)) {
this.$store.commit('build/setRequesterId', { buildNumber: this.buildNumber, requesterId: value })
}
}
},
rfqNumber: {
get () {
return this.build.rfqNumber
},
set (value) {
this.$store.commit('build/setRfqNumber', {buildNumber: this.buildNumber, rfqNumber: value })
}
},
employees () {
const res = [{ value: null, text: 'Select requested by ...' }];
for (var empId in this.$store.getters['employee/employees']) {
res.push({ value: empId, text: this.$store.getters.employees[empId] });
}
return res;
},
buildNumber () {
return parseInt(this.$route.params.buildNumber, 10);
},
build () {
return this.$store.getters['build/build'](this.buildNumber);
},
buildBadgeVariant () {
if (this.isNewBuild) { return 'primary'; }
return 'info';
},
buildBadgeText () {
if (this.isNewBuild) { return 'New'; }
return this.buildNumber;
},
isNewBuild () {
return this.buildNumber < 0;
},
buildTotal () {
return this.$store.getters['build/total'](this.buildNumber);
}
},
methods: {
fetchData () {
if (!this.isNewBuild) {
// TODO - waiting on schema changes
console.log('Fetching build data for ' + this.$route.params.buildNumber);
}
},
handleNewItem () {
this.$store.commit('setError', 'Adding items not supported');
},
newEditItem () {
this.editItemNumber = this.nextItemNumber
},
edit(eventPayload) {
this.editItemNumber = eventPayload
},
expand() {
console.log("TEST")
this.idGen('edit-item-collapse')
}
},
fetch (context) {
const buildNumber = parseInt(context.params.buildNumber, 10)
const build = context.store.getters['build/build'](buildNumber)
if (build === null && buildNumber >= 0) {
console.log('load build')
} else if (build === null && buildNumber < 0) {
// if the build doesn't exist and it is a temp build
// number, then just redirect to new
context.app.router.replace('/new')
}
}
}
</script>
buildItemEdit
<template>
<b-container>
<b-row>
<b-col>
<h3>Item</h3>
<p></p>
<b-row></b-row>
<p></p>
</b-col>
</b-row>
<b-row>
<b-col>
<b-row>
<b-col>
<label>Item No.</label>
<b-form-input v-model='itemNum' type="text" :state="itemNoState" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
/>
</b-col>
<b-col>
<label>Item Type</label>
<b-form-select v-model="type" :options="itemTypes" class="mb-3" :state="itemTypeState" />
</b-col>
<b-col>
<label>Part No.</label>
<b-form-input v-model='partNumber' type="text" :state="partNoState" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
/>
</b-col>
<b-col>
<label>Piece Amount</label>
<b-form-input v-model='pieceCount' type="number" :state="pieceAmountState" onkeypress='return event.charCode >= 48 && event.charCode <= 57'
/>
</b-col>
</b-row>
<b-row>
<b-col>
<label>Comments</label>
<b-form-textarea id="comments" v-model="comments" placeholder="Enter comments here" :rows="3" :max-rows="6"></b-form-textarea>
</b-col>
</b-row>
<p></p>
<b-row>
<b-col>
<b-card-group deck class="mb-3">
<b-card bg-variant="primary" text-variant="white" class="text-center">
<p class="card-text">Breakdown 1</p>
</b-card>
<b-card bg-variant="secondary" text-variant="white" class="text-center">
<p class="card-text">Breakdown 2</p>
</b-card>
<b-card bg-variant="success" text-variant="white" class="text-center">
<p class="card-text">Breakdown 3</p>
</b-card>
</b-card-group>
</b-col>
</b-row>
</b-col>
</b-row>
<b-row>
<p></p>
</b-row>
<b-row>
<p></p>
</b-row>
<b-row>
<b-col>
<div v-if="editmsg" class="col-md text-left">
<b-btn size="" #click="editUpdate" variant='success'>
<i class='mr-1 fa fa-plus' aria-hidden="true"></i> Save Edit</b-btn>
</div>
<p></p>
</b-col>
<b-col>
<div class="col-md text-center">
<b-btn size="" #click="addItem" variant='primary'>
<i class='mr-1 fa fa-plus' aria-hidden="true"></i> Break Downs</b-btn>
</div>
</b-col>
<b-col>
<div class="col-md text-right">
<b-btn size="" #click="addItem" variant='primary' v-bind:disabled="!canSave">
<i class='mr-1 fa fa-plus' aria-hidden="true"></i> Save Item</b-btn>
</div>
</b-col>
</b-row>
<div v-if="existmsg">
<p></p>
<b-alert show variant="danger">{{ existmsg }}</b-alert>
</div>
<div v-if="editmsg">
<p></p>
<b-alert show variant="warning">{{ editmsg }}</b-alert>
</div>
</b-container>
</template>
<script>
import Util from '#/lib/util'
export default {
props: ['buildNumber', 'itemNumber'],
data() {
return {
itemNum: "",
type: "",
partNumber: "",
pieceCount: "",
comments: "",
selected: "A",
}
},
watch: {
itemNumber: function (editItemNumber) {
if (editItemNumber == null) {
this.update({})
} else {
const item = this.item(editItemNumber)
this.update(item)
this.itemNum = editItemNumber
}
}
},
computed: {
itemNoState() {
return !isNaN(parseFloat(this.itemNum)) && isFinite(this.itemNum) ? null : false;
},
itemTypeState() {
return (this.type) ? null : false;
},
partNoState() {
return !isNaN(parseFloat(this.partNumber)) && isFinite(this.partNumber) ? null : false;
},
pieceAmountState() {
return !isNaN(parseFloat(this.pieceCount)) && isFinite(this.pieceCount) ? null : false;
},
canSave() {
return this.itemNumber != '' && this.type != '' && this.partNumber != '' && this.pieceCount != ''
},
editmsg: {
get() {
return this.$store.getters["build/item/editmsg"];
},
set(value) {
this.$store.commit("build/item/seteditmsg", value);
}
},
existmsg: {
get() {
return this.$store.getters["build/item/existmsg"];
},
set(value) {
this.$store.commit("build/item/setexistmsg", value);
}
},
itemTypes() {
const iTypes = []
const b = this.$store.getters['itemType/all']
for (var itemValue in b) {
iTypes.push({
value: itemValue,
text: b[itemValue]
})
}
return iTypes
}
},
methods: {
item(itemNumber) {
return this.$store.getters["build/item/item"](
this.buildNumber,
itemNumber
);
},
addItem() {
if (this.item(this.itemNum) == null)
{
this.$store.commit('build/item/add', {
buildNumber: this.buildNumber,
itemNumber: this.itemNum,
item: {
type: this.type,
partNumber: this.partNumber,
pieceCount: this.pieceCount,
comments: this.comments
}
})
this.update({})
}
else
{
this.existmsg = "Item number " + this.itemNum + " already exists on this quote"
}
},
update(item) {
this.itemNum = Util.field(item, 'itemNumber', '')
this.type = Util.field(item, 'type', '')
this.partNumber = Util.field(item, 'partNumber', '')
this.pieceCount = Util.field(item, 'pieceCount', '')
this.comments = Util.field(item, 'comments', '')
this.existmsg = ""
},
editUpdate(item) {
this.$store.commit('build/item/update', {
buildNumber: this.buildNumber,
itemNumber: this.itemNum,
item: {
type: this.type,
partNumber: this.partNumber,
pieceCount: this.pieceCount,
comments: this.comments
}
})
this.update({})
this.editmsg = ""
}
}
}
</script>
Now on the child I already have a button that emits an item number to the parent (editItemNumber) above. But I always want that same button on the child to expand this collapse on the parent only if its not collapsed.
Below is the existing child.
edit(item) {
const payload = {
item
};
this.$emit('edit', item.itemNumber);
this.editmsg = "Edit your item above and then click 'Save Edit'"
}
buildItemList
<template>
<b-container>
<div>
<p></p>
<h5>Items</h5>
<p></p>
<b-table show-empty bordered striped hover :items="itemTableList" :fields="fields">
<template slot="actions" scope="row">
<b-btn variant='success' size="sm" v-on:click="edit(row.item,$event.target)">Edit</b-btn>
<b-btn variant='danger' size="sm" #click.stop="delRow(row.item,row.index,$event.target)">Delete</b-btn>
</template>
</b-table>
</div>
</b-container>
</template>
<script>
import Util from "#/lib/util";
export default {
data() {
return {
fields: [
{ key: "itemNumber", label: "Item No.", sortable: true },
{ key: "type", label: "Item Type", sortable: false },
{ key: "partNumber", label: "Part No.", sortable: false },
{ key: "pieceCount", label: "Piece Amount", sortable: false },
{ key: "comments", label: "Comments", sortable: false },
{ actions: { label: "Actions" } }
]
};
},
props: ["buildNumber"],
computed: {
itemNumbers() {
console.log("DEVELOPER")
console.log(this.buildNumber)
const items = this.$store.getters["build/item/items"](this.buildNumber);
return Util.numSortedKeys(items);
},
itemTableList() {
const itemList = [];
for (var i of this.itemNumbers) {
const item = this.item(i);
itemList.push({
itemNumber: i,
type: item.type,
partNumber: item.partNumber,
pieceCount: item.pieceCount,
comments: item.comments
});
}
return itemList;
},
editmsg: {
get() {
return this.$store.getters["build/item/editmsg"];
},
set(value) {
this.$store.commit("build/item/seteditmsg", value);
}
}
},
methods: {
item(itemNumber) {
return this.$store.getters["build/item/item"](
this.buildNumber,
itemNumber
);
},
edit(item) {
const payload = {
item
};
this.$emit('doOnEmit')
this.$emit('edit', item.itemNumber);
// this.editmsg = "Edit your item above and then click 'Save Edit'"
}
}
};
</script>
So to reiterate, when the button edit is clicked, beyond what it's currently doing I want to expand that toggle collapse if not expanded on the parent component.
Is that possible?

I assume <build-item-edit> is your own component so just add a callback event to it i.e
<build-item-edit #doOnEmit="someFunctionOnTheParent" :buildNumber="buildNumber" :itemNumber="editItemNumber"/>
Then on the parent component, define the method someFunctionOnTheParent and run the code that does your UI stuff.
Then in the build-item-edit component, before you emit the value, call this.$emit('doOnEmit')