Why child component not mounted?
Base template:
<TableComponent :data="data">
<template slot="thead">
<tr>
<TableHeader></TableHeader>
</tr>
</template>
</TableComponent>
TableComponent:
<template>
<div>
<table>
<thead>
{{ renderThead() }}
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</template>
<script>
export default {
name: 'TableComponent',
props: {
data: {
required: true,
type: [Array, Function]
},
itemKey: {
default: 'id',
},
},
methods: {
renderThead: function () {
let method = this.$scopedSlots.thead
? this.$scopedSlots.thead
: () => this.$slots.thead
console.info(method())
// return method();
},
},
}
</script>
It is TableHeader component :
<template>
<th>
{{ name }}
</th>
</template>
<script>
export default {
name: 'TableHeader',
props: {
name: {
type: String
}
},
mounted() {
console.info("MOUNTED")
}
}
</script>
Console info on TableHeader not working.
Do you have any ideas?
Related
I am trying to send input data variables from child component form to parent component through dataobject 'data()'. I have seen vuejs update parent data from child component article and tried to do it but, i am unable to $emit captured dataobject through an event. can you please help me out.
Parent component:
<script>
import inputform from '../components/form.vue';
import axios from 'axios';
export default {
name: 'helloword',
data() {
return {
}
},
components: {
inputform
},
methods: {
submit() {
const path = 'http://127.0.0.1:5000';
axios.post(path, {
name: inputform.data()
})
.then(() => {
const result = 'Sucess!';
console.log(result);
})
.catch((error) => {
console.log(error);
})
}
}
}
</script>
Child component:
<template>
<div>
<table>
<thead>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</thead>
<tr>
<td><input type="text" id="name" v-model="details.name" #focusout="inputdata"></td>
<td><input type="text" id="name1" v-model="details.name1" #focusout="inputdata" ></td>
<td><input type="number" id="age" v-model="details.age" #focusout="inputdata" ></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "inputform",
data() {
return {
details: {
name: '',
name1: '',
age: ''
}
}
},
methods: {
inputdata() {
this.$emit("input_data", this.details)
}
}
}
</script>
<style scoped>
</style>
So, looking for help with emitting variable data from child compnent to parent and perform submit operation to API using axios from parent component. If there is any other better way please let me know. Thanks.
When attaching a v-model you don't need a v-on. You could also look to capture details into a single object like so and then pass it as part of the event emitted.
Child component
<template>
<div>
<table>
<thead>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</thead>
<tr>
<td>
<input type="text" id="name" v-model="details.name">
</td>
<td>
<input type="email" id="email" v-model="details.email">
</td>
<td>
<input type="number" id="age" v-model="details.age">
</td>
<td>
<button #click="inputdata">Submit</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "inputform",
data() {
return {
details: {
name: "",
email: "",
age: ""
}
};
},
methods: {
inputdata() {
console.log(this.details);
this.$emit("handledata", this.details);
}
}
};
</script>
Parent component
<template>
<div id="app">
<HelloWorld v-on:handledata="handleInput"/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
},
methods: {
handleInput(data) {
// object emitted from the child component
console.log({ data });
}
}
};
</script>
well first you should pass max two params to $emit method here's the docs: https://v2.vuejs.org/v2/api/#vm-emit and second is the v-on: before v-models is extra.
so the solution you can pass this data in one object instead of three data so the code will be like this:
data() {
return {
name: '',
email: '',
age: '',
}
},
methods: {
inputdata() {
this.$emit("input", {
name: this.name,
email: this.email,
age: this.age
})
}
}
or my prefer option put all in a form data like this
<template>
<div>
<table>
<thead>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</thead>
<tr>
<td><input type="text" id="name" v-model="form.name"></td>
<td><input type="email" id="email" v-model="form.email"></td>
<td><input type="number" id="age" v-model="form.age"></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "inputform",
data() {
return {
form: {
name: '',
email: '',
age: '',
}
}
},
methods: {
inputdata() {
this.$emit("input", this.form)
}
}
}
</script>
Getting following error.
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I am not sure what is wrong with the code. I have followed this link https://michaelnthiessen.com/solve-unknown-custom-element-vue/
I have used Local registration for child component. ( RobotBuilder.vue)
<template>
<div class="content">
<button class="add-to-cart" #click="addToCart()">Add to Cart</button>
<div class="top-row">
<PartSelector />
</div>
<div class="middle-row">
<PartSelector />
<PartSelector />
<PartSelector />
</div>
<div class="bottom-row">
<PartSelector />
</div>
<div>
<table>
<thead>
<tr>
<th>Robot</th>
<th class="cost">Cost</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(robot,index) in cart" :key="index">
<td>{{robot.head.title}}</td>
<td>{{robot.cost}}</td>
<td>
<button #click="removeItem([index])">X</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import availableParts from '../data/parts';
import { PartSelector } from './PartSelector.vue';
export default {
name: 'RobotBuilder',
components: { PartSelector },
data() {
return {
availableParts,
cart: [],
selectedRobot: {
head: {},
leftArm: {},
rightArm: {},
torso: {},
base: {},
},
};
},
computed: {},
methods: {
addToCart() {
const robot = this.selectedRobot;
const cost = robot.head.cost
+ robot.leftArm.cost
+ robot.torso.cost
+ robot.rightArm.cost
+ robot.base.cost;
this.cart.push({ ...robot, cost });
},
removeItem(index) {
this.cart.splice(index, 1);
},
},
};
</script>
<style scoped>
</style>
PartSelector.vue
<template>
<div class="part">
<img :src="selectedPart.src" title="arm"/>
<button #click="selectPreviousPart()" class="prev-selector"></button>
<button #click="selectNextPart()" class="next-selector"></button>
<span class="sale" v-show="selectedPart.onSale">Sale!</span>
</div>
</template>
<script>
import availableParts from '../data/parts';
const parts = availableParts.heads;
function getPreviousValidIndex(index, length) {
const deprecatedIndex = index - 1;
return deprecatedIndex < 0 ? length - 1 : deprecatedIndex;
}
function getNextValidIndex(index, length) {
const incrementedIndex = index + 1;
return incrementedIndex > length - 1 ? 0 : incrementedIndex;
}
export default {
name: 'PartSelector',
data() {
return { selectedPartIndex: 0 };
},
computed: {
selectedPart() {
return parts[this.selectedPartIndex];
},
},
methods: {
selectNextPart() {
this.selectedPartIndex = getNextValidIndex(
this.selectedPartIndex,
parts.length,
);
},
selectPreviousPart() {
this.selectedPartIndex = getPreviousValidIndex(
this.selectedPartIndex,
parts.length,
);
},
},
};
</script>
You are exporting as default but importing as named import.
In Robot builder, import like this :
import PartSelector from './PartSelector.vue';
so i ran into a problem again,
i want to make a table component where you can send a array to the component, and it will render a table for you
we set it up like this
<template>
<section class="container">
<Apptable :search="true" :loader="true" title="User data" :data="users"/>
</section>
</template>
<script>
import Apptable from "~/components/table.vue";
export default {
components: {
Apptable
},
data() {
return {
users: [
{
id: 1,
name: "Lars",
Adres: "hondenstraat 21",
phone: "06555965"
},
{
id: 1,
name: "John",
Adres: "verwelstraat 35",
phone: "06555965"
}
]
};
}
};
</script>
i send data to the component and loop it from there like this
<template>
<section class="container">
<h2 v-if="title">{{title}}</h2>
<input v-if="search" class="search" placeholder="Search">
<button v-if="loader" class="update" #click="dialog = true">Update</button>
<table class="table">
<thead>
<tr class="tableheader">
<th v-for="(item, index) in Object.keys(data[0])" :key="index">{{item}}</th>
</tr>
</thead>
<tbody>
<tr class="userdata" v-for="(item, index) in data" :key="index">
<td v-for="(name, index) in Object.keys(data[index])" :key="index">{{//TODO: I WANT TO SELECT THE ITEM.DYNAMIC PROPERTY}}</td>
</tr>
</tbody>
</table>
<loader v-if="loader" :trigger="dialog"/>
</section>
</template>
<script>
import loader from "~/components/loader.vue";
export default {
components: {
loader
},
data() {
return {
dialog: false
};
},
watch: {
dialog(val) {
if (!val) return;
setTimeout(() => (this.dialog = false), 1500);
}
},
props: {
data: {
type: Array,
required: true
},
title: {
type: String,
required: false,
default: false
},
loader: {
type: Boolean,
required: false,
default: false
},
search: {
required: false,
type: Boolean,
default: true
}
}
};
</script>
so if you look at the table. were i left the todo, if i put in the {{item}} in the todo place. i will get this in my column
enter image description here
but i want to select the key of the object dynamically. but if i put {{item.name}} in the todo place it will not select the key dynamically.
so the point is that i want to dynamically call a property from the object in the v-for so the columns will get the data in the cells.
You should use item[name] instead of item.name
<tbody>
<tr class="userdata" v-for="(item, index) in data" :key="index">
<td v-for="(name, nIndex) in Object.keys(data[index])" :key="nIndex">
{{ item[name] }}
</td>
</tr>
</tbody>
The question here is how can I get this Task.vue file to loop in my tasklist.vue file knowing I'm willing to pass a json file so I can get the list of all the task to do.
Task.vue
<template>
<table :id="id" class="task_box">
<tr>
<td class="task_user">{{name}}</td>
<td class="task_date">{{date}}</td>
<td class="task_time">{{time}}</td>
</tr>
<tr>
<td colspan="3" class="task_description">
<div class="toto">{{description}}</div>
</td>
</tr>
</table>
</template>
<script>
export default {
name: "task",
data() {
return {
id: 1,
name: "Test",
date: new Date(),
time: "9:30 ",
description: "whatever"
};
}
};
</script>
So this task.vue is meant to be a container that I can use in the tasklist.vue.
tasklist.vue
<template>
<div>
<task v-for="task in tasks" :key="task.id"></task>
</div>
</template>
<script>
import Task from "./Task.vue";
export default {
name: "tasklist",
data() {
return {
tasks: []
};
},
components: {
Task
}
};
</script>
You need to use Properties to pass your task from your task list to your task. Code is untested.
#Task
<template>
<table :id="task.id" class="task_box">
<tr>
<td class="task_user">{{task.name}}</td>
<td class="task_date">{{task.date}}</td>
<td class="task_time">{{task.time}}</td>
</tr>
<tr>
<td colspan="3" class="task_description">
<div class="toto">{{description}}</div>
</td>
</tr>
</table>
</template>
<script>
export default {
name: "task",
props: ["task"],
};
</script>
#TaskList
<template>
<div>
<task v-for="task in tasks" :task="task" :key="task.id"></task>
</div>
</template>
<script>
import Task from "./Task.vue";
export default {
name: "tasklist",
data() {
return {
tasks: [{
id: 1,
name: "Test",
date: new Date(),
time: "9:30 ",
description: "whatever"
}]
};
},
components: {
Task
}
};
</script>
If task-component is reapeating, you should insert it's tag inside table tag.
Use props to pass data to task-component from tasklist-component
When tasklist-component is creating, you can load tasks via Ajax from json.
Full working example of code you can find here
TaskList.vue
<script>
import Task from "./Task.vue";
export default {
components: { Task },
data() {
return {
tasks: [],
isLoading: false,
doShowNewTaskAddingDialog: false,
};
},
created(){
// this.isLoading = true;
// $.ajax({
// url: '/some/tasks/url',
// method: 'GET',
// dataType: 'json',
// success: (tasks) => {
// this.isLoading = false;
// this.tasks = tasks;
// }
// });
this.tasks = [
{id: 1, name: "task 1", date: new Date(), time: "9:31", description: "descr 1" },
{id: 1, name: "task 2", date: new Date(), time: "9:32", description: "descr 2" },
{id: 1, name: "task 3", date: new Date(), time: "9:33", description: "descr 3" },
{id: 1, name: "task 4", date: new Date(), time: "9:34", description: "descr 4" },
]
},
methods:{
addButtonHandler(){
this.doShowNewTaskAddingDialog = true;
}
}
};
</script>
<template>
<div>
<div v-if="isLoading">Please wait, loading tasks...</div>
<table v-if="!isLoading">
<task
v-for="task in tasks"
:key="task.id"
:task="task"
:isNew="false"
/>
<task
v-if="doShowNewTaskAddingDialog"
:isNew="true"
/>
</table>
Add new?
</div>
</template>
<style>
table, td{
border-collapse: collapse;
border: 1px solid black;
}
</style>
Task.vue
<template>
<!--
I'd prefer use bootstrap row and col- divs here instead
of table and tbody-hack. See discussion here: https://github.com/vuejs/Discussion/issues/295
-->
<tbody>
<!-- display only -->
<tr v-if="!isNew">
<td class="task_user">{{name}}</td>
<td class="task_date">{{date}}</td>
<td class="task_time">{{time}}</td>
</tr>
<tr v-if="!isNew">
<td colspan="3" class="task_description">
<div class="toto">{{description}}</div>
</td>
</tr>
<!-- edit -->
<tr v-if="isNew">
<td class="task_user"><input type="text" v-model="name"></td>
<td class="task_date"><input type="text" v-model="date"></td>
<td class="task_time"><input type="text" v-model="time"></td>
</tr>
<tr v-if="isNew">
<td colspan="3" class="task_description">
<div class="toto"><input type="text" v-model="description"></div>
</td>
</tr>
</tbody>
</template>
<script>
export default {
props:{
task: { type: Object, required: false },
isNew: { type: Boolean, required: true },
},
created(){
if(!this.isNew){
this.id = this.task.id;
this.name = this.task.name;
this.date = this.task.date;
this.time = this.task.time;
this.description = this.task.description;
}
},
data() {
return {
id: 1,
name: "",
date: new Date(),
time: "0:00 ",
description: ""
};
}
};
</script>
I'm having this setup where I have child component props that have datetime format inside it and I want to change it to more human readable format in my table, so i use moment js to change the format and to do those kinds of task it will be made more sense if I use computed property. Like this in my index.vue
<div class="page-container">
<div class="page-content">
<div class="content-wrapper">
<data-viewer :source="source" :thead="thead">
<template scope="props">
<tr>
<td>{{props.item.name}}</td>
<td>{{props.item.creator}}</td>
<td>
<i class="icon-checkmark5" v-if="props.item.publish === '0'"></i>
<i class="icon-cancel-circle2" v-else></i>
{{props.item.publish}} //for testing purpose to see returned value
</td>
<td>{{publishDate}}</td> //this is where i put my computed to change created_at format
</tr>
</template>
</data-viewer>
</div>
</div>
</div>
<script type="text/javascript">
import DataViewer from '../../components/dataviewer.vue'
import moment from 'moment'
export default{
components:{
DataViewer
},
data(){
return{
source: '/api/article',
thead: [
{title: 'Name', key: 'name', sort: true},
{title: 'Creator', key: 'creator_id', sort: true},
{title: 'Publish', key: 'publish', sort: true},
{title: 'Created', key: 'created_at', sort: true}
],
}
},
computed: {
publishDate: function(){
return moment(props.item.created_at).format('YYYY-MM-DD')
}
}
}
</script>
and here is what inside my dataviewer file
<template>
<table class="table">
<thead class="bg-primary">
<tr>
<th v-for="item in thead">
<span>{{item.title}}</span>
</th>
</tr>
</thead>
<tbody>
<slot v-for="item in model.data" :item="item"></slot>
</tbody>
</table>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
export default {
props: ['source', 'thead'],
data() {
return {
model: {
data: []
},
}
},
beforeMount() {
this.fetchData()
},
methods: {
fetchData() {
var vm = this
axios.get(this.source)
.then(function(response) {
Vue.set(vm.$data, 'model', response.data.model)
})
.catch(function(error) {
console.log(error)
})
}
}
}
</script>
but it just won't work, it can't find props.item.created_at, so how I can change created_at or any other property item to change from my index.vue?
Seems like using a filter will work here:
Instead of using computed props:
filters: {
publishDate: function(value){
return moment(value).format('YYYY-MM-DD')
}
}
In place of {{publishDate}}
<td>{{props.item.created_at | publishedDate }}</td>