Related
I have a file called PostJobCreate.vue where an Employer can create a new job post.
I also have a table called locations with address columns and location_name column.
An employer can have many locations.
I'm trying to load the employers Locations into a select field so that when they create a new Job Post, they know what Location it is for.
I'm loading all of the employers locations in locations: [].
so I could get a column like this this.locations.location_name.
How can I load all of the location_name into a select field, so that a User can select the location the Job Post is for?
This is what I have so far very basic:
<b-form-group label="Location Name" label-for="location_name">
<b-form-select
v-model="locations.location_name"
:options=""
id="location_name"
size="sm"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.location_name">{{ errors.location_name[0] }}</div>
</b-form-group>
I want to load the location_name field for every record in the table, inside the :options. I might need a v-for, but I'm not sure what to do next.
PostJobCreate.vue:
<template>
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h3 class="card-title">Post a Job</h3>
<form class="forms-sample" v-on:submit.prevent="createJobPosts">
<b-form-group
label="Employment Type"
label-for="employment-type"
>
<b-form-radio-group
id="employment-type"
v-model="jobPostsData.employment_type"
:options="jobPostsData.optionsTwo"
name="employment-type"
>
</b-form-radio-group>
<div class="invalid-feedback" v-if="errors.employment_type">{{ errors.employment_type[0] }}</div>
</b-form-group>
<b-form-group label="Job Title" label-for="job_title">
<b-form-select
v-model="jobPostsData.job_title"
:options="jobPostsData.optionsThree"
id="job_title"
placeholder="Enter job title"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.job_title">{{ errors.job_title[0] }}</div>
</b-form-group>
<b-form-group label="Job Description" label-for="job_description">
<b-form-textarea
v-model="jobPostsData.job_description"
id="job_description"
placeholder="Enter job description"
:rows="10"
:max-rows="12"
class="mb-2"
></b-form-textarea>
<div class="invalid-feedback" v-if="errors.job_description">{{ errors.job_description[0] }}</div>
</b-form-group>
<b-form-group label="Salary Range" label-for="salary">
<b-form-select
v-model="jobPostsData.salary"
:options="jobPostsData.options"
id="salary"
size="sm"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.salary">{{ errors.salary[0] }}</div>
</b-form-group>
<b-form-group label="Location Name" label-for="location_name">
<b-form-select
v-model="locations.location_name"
:options=""
id="location_name"
size="sm"
>
</b-form-select>
<div class="invalid-feedback" v-if="errors.location_name">{{ errors.location_name[0] }}</div>
</b-form-group>
<b-row>
<b-col class="text-left">
<b-button type="submit" variant="success" class="mr-2"
><i class="mdi mdi-check-circle"></i> Save</b-button
>
</b-col>
</b-row>
</form>
</div>
</div>
</div>
</template>
<script>
import * as employerService from '../../../services/employer_service.js';
import * as employerLocationService from '../../../services/employer_location_service.js';
export default {
name: "postJobCreate",
data() {
return {
locations: [],
jobPostsData: {
job_title: null,
optionsThree: [
{ value: null, text: 'Please select an option' },
{ value: 'Budtender/Retail', text: 'Budtender/Retail' },
{ value: 'Delivery/Courier', text: 'Delivery/Courier' },
{ value: 'Security', text: 'Security' },
{ value: 'Grower/Horticulturalist', text: 'Grower/Horticulturalist'},
{ value: 'Master Grower', text: 'Master Grower'},
{ value: 'Extraction', text: 'Extraction'},
{ value: 'Chemist', text: 'Chemist'},
{ value: 'Trimmer', text: 'Trimmer'},
{ value: 'Packagers', text: 'Packagers'},
{ value: 'Manufacturing', text: 'Manufacturing'},
{ value: 'Edible Production', text: 'Edible Production'},
{ value: 'Sales', text: 'Sales'},
{ value: 'Marketing', text: 'Marketing'},
{ value: 'Management', text: 'Management'},
{ value: 'Executive Level', text: 'Executive Level'},
{ value: 'Other', text: 'Other'},
],
job_description: '',
employment_type: 'Freelance',
optionsTwo: [
{ value: "Freelance", text: "Freelance", },
{ value: "Full Time", text: "Full Time", },
{ value: "Internship", text: "Internship", },
{ value: "Part Time", text: "Part Time", },
],
salary: '40,000 and under',
options: [
{ value: '40,000 and under', text: '40,000 and under' },
{ value: '40,000-50,000', text: '$40,000-50,000' },
{ value: '50,000-60,000', text: '$50,000-60,000' },
{ value: '60,000-70,000', text: '$60,000-70,000' },
{ value: '70,000-80,000', text: '$70,000-80,000' },
{ value: '80,000-90,000', text: '$80,000-90,000' },
{ value: '90,000-100,000', text: '$90,000-100,000' },
{ value: '100,000-150,000', text: '$100,000-150,000' },
{ value: '150,000-200,000', text: '$150,000-200,000' },
{ value: '200,000-250,000', text: '$200,000-250,000' },
{ value: '250,000-300,000', text: '$250,000-300,000' },
{ value: '300,000-350,000', text: '$300,000-350,000' },
{ value: '350,000-400,000', text: '$350,000-400,000' },
{ value: '400,000-450,000', text: '$400,000-450,000' },
{ value: '450,000-500,000', text: '$450,000-500,000' },
{ value: '500,000-1,000,000', text: '$500,000-1,000,000' },
{ value: '1,000,000+', text: '1,000,000+' }
],
},
errors: {}
};
},
mounted() {
this.loadLocations();
},
methods: {
createJobPosts: async function() {
let formData = new FormData();
formData.append('job_title', this.jobPostsData.job_title);
formData.append('job_description', this.jobPostsData.job_description);
formData.append('employment_type', this.jobPostsData.employment_type);
formData.append('salary', this.jobPostsData.salary);
formData.append('location_name', this.locations.location_name);
try {
const response = await employerService.createJobPosts(formData);
this.$router.push('/post-a-job');
this.$toast.success("Job Post created Successfully!");
} catch (error) {
switch (error.response.status) {
case 422:
this.errors = error.response.data.errors;
break;
default:
this.$toast.error("Some error occurred, please try again!");
break;
}
}
},
loadLocations: async function() {
try {
const response = await employerLocationService.loadLocations();
this.locations = response.data.locations.data;
} catch (error) {
this.$toast.error('Some error occurred, please refresh!');
}
}
}
};
</script>
<style scoped>
</style>
Thank you.
You could Change the option field names as follows :
<b-form-select
v-model="selectedLocation"
:options="locations"
id="location_name"
size="sm"
value-field="location_name"
text-field="location_name"
>
...
selectedLocation should be defined in data as follows :
data() {
return {
locations: [],
selectedLocation:null
. ..
I'm trying to create a survey with the option to order the questions that are displayed in a table when creating the survey.
I'm using vue draggable and the example works but I don't know how to use this with a table and still get the rows to be draggable
Example
<draggable v-model="section" #start="drag=true" #end="drag=false">
<div v-for="section in surveySections" :key="section.id">{{section.title}}</div
</draggable>
This is the table
<el-table
:data="form.question_id"
border>
<draggable v-model="surveyQuestions" #start="drag=true" #end="drag=false">
<el-table-column prop="title" label="Pregunta"></el-table-column>
<el-col :xs="5">
<el-table-column fixed="right" label="Operaciones">
<template slot-scope="scope">
<el-button
#click.native.prevent="deleteRow(scope.$index, form.question_id)"
type="text" size="small">
<span class="icon-create">Eliminar</span>
<i class="el-icon-delete-solid"></i>
</el-button>
</template>
</el-table-column>
</el-col>
</draggable>
</el-table>
How can I get this to work?
I must have 50 reputation to comment！
SO.
you can see elementUI Table组件实现拖拽效果
e.g
npm install sortablejs --save
// Element table must specify row-key . Otherwise, the order will be wrong
import Sortable from 'sortablejs'
<template>
<div style="width:800px">
<el-table :data="tableData"
border
row-key="id"
align="left">
<el-table-column v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label">
</el-table-column>
</el-table>
<pre style="text-align: left">
{{dropCol}}
</pre>
<hr>
<pre style="text-align: left">
{{tableData}}
</pre>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
col: [
{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}
],
dropCol: [
{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}
],
tableData: [
{
id: '1',
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 100 弄'
},
{
id: '2',
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 200 弄'
},
{
id: '3',
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 300 弄'
},
{
id: '4',
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 400 弄'
}
]
}
},
mounted() {
this.rowDrop()
this.columnDrop()
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
}
})
},
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex]
this.dropCol.splice(evt.oldIndex, 1)
this.dropCol.splice(evt.newIndex, 0, oldItem)
}
})
}
}
}
</script>
<style scoped>
</style>
element ui table Sortable.js
I have a vue component which calls a load method returning a multi-part json object. The template of this vue is made up of several sub-vue components where I assign :data="some_object".
This works in all templates except for the one with a v-data-table in that the v-for process (or the building/rendering of the v-data-table) seems to kick-in before the "data" property is loaded.
With an npm dev server if I make a subtle change to the project which triggers a refresh the data-table then loads the data as I expect.
Tried various events to try and assign a local property to the one passed in via "props[]". Interestingly if I do a dummy v-for to iterate through or simply access the data[...] property the subsequent v-data-table loads. But I need to bind in other rules based on columns in the same row and that doesn't work.
Parent/main vue component:
...
<v-flex xs6 class="my-2">
<ShipViaForm :data="freight"></ShipViaForm>
</v-flex>
<OrderHeaderForm :data="orderheader"></OrderHeaderForm>
<v-flex xs12>
<DetailsForm :data="orderdet" :onSubmit="submit"></DetailsForm>
</v-flex>
...
So in the above the :data property is assigned from the result below for each sub component.
...
methods: {
load(id) {
API.getPickingDetails(id).then((result) => {
this.picking = result.picking;
this.freight = this.picking.freight;
this.orderheader = this.picking.orderheader;
this.orderdet = this.picking.orderdet;
});
},
...
DetailsForm.vue
<template lang="html">
<v-card>
<v-card-title>
<!-- the next div is a dummy one to force the 'data' property to load before v-data-table -->
<div v-show="false">
<div class="hide" v-for='header in headers' v-bind:key='header.product_code'>
{{ data[0][header.value] }}
</div>
</div>
<v-data-table
:headers='headers'
:items='data'
disable-initial-sort
hide-actions
>
<template slot='items' slot-scope='props'>
<td v-for='header in headers' v-bind:key='header.product_code'>
<v-text-field v-if="header.input"
label=""
v-bind:type="header.type"
v-bind:max="props.item[header.max]"
v-model="props.item[header.value]">
</v-text-field>
<span v-else>{{ props.item[header.value] }}</span>
</td>
</template>
</v-data-table>
</v-card-title>
</v-card>
</template>
<script>
import API from '#/lib/API';
export default {
props: ['data'],
data() {
return {
valid: false,
order_id: '',
headers: [
{ text: 'Order Qty', value: 'ord_qty', input: false },
{ text: 'B/O Qty', value: 'bo_qty', input: false },
{ text: 'EDP Code', value: 'product_code', input: false },
{ text: 'Description', value: 'product_desc', input: false },
{ text: 'Location', value: 'location', input: false },
{ text: 'Pick Qty', value: 'pick_qty', input: true, type: 'number', max: ['ord_qty'] },
{ text: 'UM', value: 'unit_measure', input: false },
{ text: 'Net Price', value: 'net_price', input: false },
],
};
},
mounted() {
const { id } = this.$route.params;
this.order_id = id;
},
methods: {
submit() {
if (this.valid) {
API.updateOrder(this.order_id, this.data).then((result) => {
console.log(result);
this.$router.push({
name: 'Orders',
});
});
}
},
clear() {
this.$refs.form.reset();
},
},
};
</script>
Hopefully this will help someone else who can't see the forest for the trees...
When I declared the data() { ... } properties in the parent form I initialised orderdet as {} instead of [].
I'm attempting to nest some components - ultimately I would like to have a component which displays Posts, with a PostItem component used to render each post. Inside the PostItem, I want a list of related comments, with CommentItem to render each comment. I have the posts displayed using the PostItem with no errors, but as soon as I add the Comments I get errors. So to simplify, I've pulled the CommentsList component out and I'm just trying to display it on the page, manually loading in all comments - it's an exact copy of PostsList, except with comment replacing post, but it generates an error:
[Vue warn]: Property or method "commment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Comment> at resources/assets/js/components/CommentItem.vue
<CommentsList> at resources/assets/js/components/CommentsList.vue
<Root>
CommentsList.vue
<template>
<div class="media-list media-list-divided bg-lighter">
<comment v-for="comment in comments"
:key="comment.id"
:comment="comment">
</comment>
</div>
</template>
<script>
import comment from './CommentItem'
export default {
components: { comment },
data: function() {
return {
comment: {
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
},
comments: [
{
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
}
]
};
},
created() {
this.fetchCommentsList();
},
methods: {
fetchCommentsList() {
axios.get('/api/comments').then((res) => {
//alert(JSON.stringify(res.data[0], null, 4));
this.comments = res.data;
});
},
createComment() {
axios.post('api/comments', {content: this.comment.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
.then((res) => {
this.comment.content = '';
// this.comment.user_id = Laravel.userId;
// this.task.statuscolor = '#ff0000';
this.edit = false;
this.fetchCommentsList();
})
.catch((err) => console.error(err));
},
deleteComment(id) {
axios.delete('api/comments' + id)
.then((res) => {
this.fetchCommentsList()
})
.catch((err) => console.error(err));
},
}
}
</script>
CommentItem.vue
<template>
<div>
<a class="avatar" href="#">
<img class="avatar avatar-lg" v-bind:src="'/images/user' + comment.user.id + '-160x160.jpg'" alt="...">
</a>
<div class="media-body">
<p>
<strong>{{ commment.user.name }}</strong>
</p>
<p>{{ comment.content }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'comment',
props: {
comment: {
required: true,
type: Object,
default: {
content: "",
id: 1,
user: {
name: "",
id: 1
}
}
}
},
data: function() {
return {
}
}
}
</script>
I'm pretty new to Vue - I've read so many tutorials and have been digging through the documentation and can't seem to figure out why its working for me with my PostsList component thats an exact copy. It also seems odd that I need both comment and comments in the data return - something that my working Posts version requires.
I'll drop in my working Posts components:
PostsList.vue
<template>
<div>
<div v-if='posts.length === 0' class="header">There are no posts yet!</div>
<post v-for="post in posts"
:key="post.id"
:post="post">
</post>
<form action="#" #submit.prevent="createPost()" class="publisher bt-1 border-fade bg-white">
<div class="input-group">
<input v-model="post.content" type="text" name="content" class="form-control publisher-input" autofocus>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">New Post</button>
</span>
</div>
<span class="publisher-btn file-group">
<i class="fa fa-camera file-browser"></i>
<input type="file">
</span>
</form>
</div>
</template>
<script>
// import CommentsManager from './CommentsManager.vue';
import post from './PostItem.vue';
export default {
components: {
post
},
data: function() {
return {
post: {
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
},
posts: [
{
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
}
]
};
},
created() {
this.fetchPostsList();
},
methods: {
fetchPostsList() {
axios.get('/api/posts').then((res) => {
//alert(JSON.stringify(res.data[0], null, 4));
this.posts = res.data;
});
},
createPost() {
axios.post('api/posts', {content: this.post.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
.then((res) => {
this.post.content = '';
// this.post.user_id = Laravel.userId;
// this.task.statuscolor = '#ff0000';
this.edit = false;
this.fetchPostsList();
})
.catch((err) => console.error(err));
},
deletePost(id) {
axios.delete('api/posts' + id)
.then((res) => {
this.fetchPostsList()
})
.catch((err) => console.error(err));
},
}
}
</script>
PostItem.vue
<template>
<div class="box">
<div class="media bb-1 border-fade">
<img class="avatar avatar-lg" v-bind:src="'/images/user' + post.user.id + '-160x160.jpg'" alt="...">
<div class="media-body">
<p>
<strong>{{ post.user.name }}</strong>
<time class="float-right text-lighter" datetime="2017">24 min ago</time>
</p>
<p><small>Designer</small></p>
</div>
</div>
<div class="box-body bb-1 border-fade">
<p class="lead">{{ post.content }}</p>
<div class="gap-items-4 mt-10">
<a class="text-lighter hover-light" href="#">
<i class="fa fa-thumbs-up mr-1"></i> 0
</a>
<a class="text-lighter hover-light" href="#">
<i class="fa fa-comment mr-1"></i> 0
</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'post',
props: {
post: {
required: true,
type: Object,
default: {
content: "",
id: 1,
user: {
name: "",
id: 1
}
}
}
},
data: function() {
return {
}
}
}
</script>
I'm using Vuejs to display data from an API to a template. I'm trying to figure out why I am not returning data for the team so I can display in for the template. Right now when I use the VueJS Chrome Extention it shows that the team is an empty object.
<div v-if="team">
<div class="row">
<div class="col-12 col-sm-12">
<div class="fw-700 pb3 mb5" style="border-bottom: 1px solid #333;">Name:</div>
<div class="mb10" style="font-size: 20px;">{{ team.name }}</div>
</div>
</div>
<script>
module.exports = {
http: {
headers: {
'X-CSRF-TOKEN': window.Laravel.csrfToken
}
},
props: [ 'id', 'editable' ],
data: function(){
return {
modalName: 'additionalInfo',
team:{
}
}
};
},
methods: {
fetchInfo: function(){
this.$http.get('/api/teams/info', { params: { id: this.id } }).then((response) => {
this.team = response.data;
});
},
},
}
}
</script>
It is empty because your method fetchInfo isn't being called, so you need to do something like this:
created () {
this.fetchInfo()
}
This will call the function fetchInfo which in turn will fetch and fill this.team