Pagination plugin from https://github.com/HENNGE/vue3-pagination.I don't know how to use this plugin am trying to use the vue plugin as described in my code. The page number is displayed, but when I click on it I get an error (reading: length). What is the cause?
Can I use this plugin without permission?
list.vue
<template>
<div>
<tbody>
<tr
v-for="forms in form"
:key="forms.id"
style="cursor: pointer;"
#click="NoticeDetail(forms.id)">
<td class="td_title">
{{ forms.title }}
</td>
<td class="text_center">
{{ forms.company }}
</td>
<td class="text_center">
{{ forms.company_url }}
</td>
<td class="text_center">
{{ forms.location }}
</td>
<td class="text_right">
{{ forms.date_posted }}
</td>
</tr>
</tbody>
</table>
<v-pagination
v-model="page"
:pages="10"
:range-size="1"
active-color="#DCEDFF"
#update:modelValue="updateHandler" />
</div
</template>
<script setup>
import { useRouter } from 'vue-router'
import VPagination from '#hennge/vue3-pagination'
import '#hennge/vue3-pagination/dist/vue3-pagination.css'
import Sidebar from '~/components/Sidebar.vue'
import { ref } from 'vue'
import axios from 'axios'
const router = useRouter()
const form = ref([])
const username = sessionStorage.getItem('user')
const fetchPosts = async () =>{
axios.get('http://127.0.0.1:8000/jobs/all')
.then((res)=>{
console.log(res.data)
form.value = res.data
})
}
fetchPosts()
const NoticeDetail = id => {
console.log(id)
router.push({
name: 'noticedetail',
params: {
id
}
})
}
</script>
Related
I have searched for a solution with no avail. I need to set a minimum width on my RESPONSIVE table columns in a Table imported from reactstrap.
This table is always going to have a DYNAMIC amount of columns. I have a select as my <th> and I want to set the to a minimum width so users can obviously read the select options.
Here is my component below
import React, { Fragment, useState, useContext, useMemo } from 'react';
import { CustomInput,Input, Table} from 'reactstrap';
const TableComponent = ({ register, errors, watch }) => {
const TableRow = ({ data }) => (
<tr className="align-middle">
{data.map((customer, index) => (
<td className="text-nowrap" key={index}>{customer}</td>
))}
</tr>
);
return (
<Fragment>
<Table responsive bordered striped hover>
<thead>
<tr>
{
fileContacts.map((contact, index) => (
<th className="bg-primary pr-1 pl-1 pt-2 pb-2" scope="col" key={index}>
<Input
type="select"
className="fs--1"
name="selectHeader"
id="selectHeader"
>
<option>First name</option>
<option>Last name</option>
<option>Email</option>
</Input>
</th>
))}
</tr>
</thead>
<tbody>
{
upload.contacts.slice(0, 10).map((customer, index) => (
<TableRow data={customer} key={index}/>
))
}
</tbody>
</Table>
</Fragment>
);
};
export default TableComponent;
Here are two images. These are what it looks like on mobile or smallest laptop size
Here is the solution. In the TableRow component that is being rendered in the body, you need to add a style prop to the <td>
Note: this must be an object within jsx brackets or else you will get an error.
Here is a copy of the TableRow
const TableRow = ({ data }) => (
<tr className="align-middle">
{data.map((customer, index) => (
<td style={{minWidth: 150}} key={index}>{customer}</td>
))}
</tr>
);
Here was my expected output
i'm trying to show a table of data that is coming from Firebase Firestore, i've already managed to put all data into a array, but when i try to show that content, the entire array shows up instead of the single items, see the image:
And heres my code:
<template>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in result"
v-bind:key="index"
>
<td>{{ result }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
import firebase from 'firebase'
import {db} from '../service/firebase'
export default {
data () {
return {
userName: null,
result: [],
name: null,
email: null,
userMail: null,
telefone: null,
userPhone: null,
userAccept: null,
}
},
async created() {
var userData = []
await db.collection("users").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(`${doc.id} => ${doc.data()}`);
userData.push(doc.data())
});
});
this.result = userData.map(a => a.name)
console.log(result)
}
}
</script>
How do i show a table of single items of the array instead of a table of arrays?
Thank you in advance!
You're printing the whole content using {{result}}, the right syntax is the following :
<tr v-for="(item, index) in result" v-bind:key="index" >
<td v-for="(record,i) in item" :key="i">{{ record }}</td>
</tr>
I am trying to retrieve the data from cloud firestore database.
But I got an error,
[Vue warn]: Error in render: "TypeError: product.data is not a
function"
I want to show the each product name and price in my table.
But I have no idea why this issue comes up.
So I hope somebody can help me out.
If I don't use data() in the vue template, I can see all the data as I expected.
<template>
<h3>Product List</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
<tr v-for="(product, index) in products" :key="index">
<td>{{ product.data().name }}</td>
<td>{{ product.data().price }}</td>
<td>
<button #click="editProduct(product)" class="btn btn-primary">Edit</button>
<button #click="deleteProduct(product.id)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { fb, db } from '../firebase'
export default {
name: 'Products',
props: {
msg: String
},
data () {
return {
products: [],
product: {//object
name: null,
price: null
}
}
},
methods: {
editProduct(product) {
$('#edit').modal('show')
},
readData() {
db.collection("products").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.products.push(doc.data());
});
});
},
saveData() {
// Add a new document with a generated id.
db.collection("products").add(this.product)
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
this.product.name = "",
this.product.price = ""
this.readData()
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
}
},
created() {
this.readData();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
I will have to agree with #Mostafa, the naming convention is not very readable. Your error is telling you that you are trying to invoke a function that is not a function or does not exist in your data.
Change:
<td>{{ product.data().name }}</td>
<td>{{ product.data().price }}</td>
To:
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
This should fix it, as you are iterating over the products list (of which isn't clear), so i advise you should change:
<tr v-for="(product, index) in products" :key="index">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td>
<button #click="editProduct(product)" class="btn btn-primary">Edit</button>
<button #click="deleteProduct(product.id)" class="btn btn-danger">Delete</button>
To:
<tr v-for="(productItem, index) in products" :key="index">
<td>{{ productItem.name }}</td>
<td>{{ productItem.price }}</td>
<td>
<button #click="editProduct(productItem)" class="btn btn-primary">Edit</button>
<button #click="deleteProduct(productItem.id)" class="btn btn-danger">Delete</button>
Your code is very confusing.
I don't understand why you are calling data method on product and why you have product and products in your data when you just need one.
So i'm assuming Vue is mixing product in your for loop and the product object in your data.
So either change the product name in your for loop to something else:
v-for="(item,index) in products"
or change product in your data (just remove it if you can) cause it doesn't have any data method in it.
How to fetch and display data in ASP.net core using React js Line 26: 'cusList' is not defined no-undef error is coming up.
import React, { Component } from 'react';
import './Map';
export class FetchCustomer extends Component {
static displayName = FetchCustomer.Name;
constructor(props) {
super(props);
this.state = { customers: [], loading: true };
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: this.renderCustomerTable(this.state.cusList);
return <table className='table'>
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{cusList.map(cus =>
<tr key={cus.Id}>
<td></td>
<td>{cus.Id}</td>
<td>{cus.Name}</td>
<td>{cus.Address}</td>
<td>
<a className="action" onClick={(id) => this.handleEdit(cus.Id)}>Edit</a> |
<a className="action" onClick={(id) => this.handleDelete(cus.Id)}>Delete</a>
</td>
</tr>
)}
</tbody>
</table>;
fetch('api/Customer/Index')
.then(response => response.json())
.then(data => { this.setState({ cusList: data, loading: false }) });
}
}
Following changes are needed in your code...
In your constructor change the last line of code with following:
this.state = { customers: [], loading: true, cusList: [] };
And in the "tbody" section please change the code to:
<tbody>
{this.state.cusList.map(cus =>
<tr key={cus.Id}>
<td></td>
<td>{cus.Id}</td>
<td>{cus.Name}</td>
<td>{cus.Address}</td>
<td>
<a className="action" onClick={(id) => this.handleEdit(cus.Id)}>Edit</a> |
<a className="action" onClick={(id) => this.handleDelete(cus.Id)}>Delete</a>
</td>
</tr>
)}
</tbody>
This should work.
Also it's pretty clear from the error itself about what you are missing.
Hope it helps.
I am getting started with Symfony 4 using Twig templating and VueJS for UI components.
I have a very basic component in a .vue file for listing tasks, which currently renders a basic table.
// task-list.vue
<template>
<div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>
Task
</th>
<th>
Description
</th>
<th>
Completed?
</th>
</tr>
</thead>
<tbody>
<tr v-for="task in parsedTasks">
<td>
{{ task.title }}
</td>
<td>
{{ task.description }}
</td>
<td>
{{ task.completed ? 'Yes' : 'No' }}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'task-list',
props: {
tasks: {required: true}
},
computed: {
parsedTasks() {
return JSON.parse(this.tasks);
}
},
};
</script>
This component is registered in the root JS file;
// assets/js/app.js
Vue.component('task-list', TaskList);
new Vue({
el: '#app-root'
});
This is then used in a Twig template;
// tasks/list.html.twig
...
<task-list tasks="{{ tasks | json_encode }}"></task-list>
...
I want to be able to use the path() Twig function so that, when a row in the task list is clicked, the user is redirected to the generated route/path. Is this possible given that the Vue component is not in a Twig file?
As a side question, is there a better way to pass a Twig variable to a Vue component than json encoding then parsing the data as above?
There is two main approaches:
Generate the URL in the backend and use it in javascript:
var route = "{{ path('blog_show', {'slug': 'my-blog-post'})|escape('js') }}";
https://symfony.com/doc/current/routing/generate_url_javascript.html
Or using a javascript routing library that integrates with symfony routes like FOSJsRouting:
var url = Routing.generate('blog_show', {
'slug': 'my-blog-post'
});
https://github.com/FriendsOfSymfony/FOSJsRoutingBundle