I want to update multiple rows using the checkbox, in vue.js, with axios. Everything is okay, but it's not worked.
When I click the checkbox and click the button, opens a card. When i input "writerid", I want to update checked rows
<v-card
v-if="showCard"
max-width="400"
class="mx-auto"
>
<v-container>
<v-row dense>
<v-col cols="12">
<v-card
color="#385F73"
theme="dark"
>
<v-card-title class="text-h6">
Lütfen güncelenecek yazar id giriniz.
</v-card-title>
<v-card-subtitle>
<input v-model="writerId" type="text" class="textbox2"/>
</v-card-subtitle>
<v-card-actions>
<v-btn
class="ml-2"
variant="outlined"
size="small"
#click="updateBooks()"
>
Güncelle
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
async updateBooks() {
if(this.singleSelect.length !== 0) {
for(var i = 0; i < this.singleSelect.length; i++) {
try {
const result = await axios.put(
`https://localhost:7258/api/Book/` + this.books[i]["bookId"],
{
writerId: this.writerId
}
);
console.log(result.data);
// alert("Kitap bilgileri başarıyla güncellendi!");
this.$root.SnackbarPage.show({ text: "Kitap başarıyla güncellendi!" });
// this.reloadPage();
} catch (e) {
console.log(e);
}
You have to give all props which requested for update method. You should change name of input text for new update.
Related
I'm designing a form that can both used to create and edit something.
The form has a dropdown, which isn't initialized when created, but is set with a value when used for editing.
I want to be able to modify the value of the drop down, both for creating & updating, yet is only working when the mode is CREATE.
Here's my template:
<template>
<v-row justify="center">
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field v-model="title" label="Title*" :rules="rules.fieldRules" prepend-icon="mdi-text">
</v-text-field>
<v-text-field v-model="website_link" label="URL" prepend-icon="mdi-web">
</v-text-field>
<h3>Description</h3>
<text-editor #update:modelValue="getValue" :rules="rules.fieldRules" :modelValue="description">
</text-editor>
<br />
<v-select v-model="selectedState" :readonly="false" :items="items" filled label="Which state?*" prepend-icon="mdi-help"></v-select>
<v-file-input v-model="files" prepend-icon="mdi-camera" multiple label="File input"></v-file-input>
<v-layout v-for="file of files" :key="file">
<v-img :src="generateUrl(file)" max-width="10%" max-height="10%">
</v-img>
</v-layout>
<v-combobox v-model="tags" prepend-icon="mdi-lightbulb" label="Tags" chips clearable multiple filled
rounded></v-combobox>
<v-btn :disabled="mode == 'EDIT' ? false : !valid" color="success" class="mr-4" #click="validate">
Validate
</v-btn>
<v-btn color="blue" class="mr-4" #click="backToProfile">
Back
</v-btn>
</v-form>
</v-row>
</template>
selectedState is a computed method described as below here:
selectedState: {
get() {
if (this.mode == 'CREATE') {
return this.state
} else {
const state = this.items.filter((item) => item.value = this.currentConcept.state)[0].title;
this.setState(state);
return this.state;
}
},
set(value) {
console.log(`value: ${value}`)
this.state = value;
}
}
Am I missing something?
TIA
Why does my edit button in a vue data-table not work? The method creates a new line in the table. I want do edit a line.
template
<!-- DIALOG PARA EDITAR USUARIO -->
<v-dialog v-model="editarDialog">
<v-card>
<v-card-title>
<span class="text-h5">Editar Pessoa</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="pessoa.nome"
label="Pessoa*"
required
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="pessoa.idade" label="Idade*"></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="editarDialog = false">
Fechar
</v-btn>
<v-btn color="blue darken-1" text #click="editarPessoa"> Salvar </v-btn>
</v-card-actions></v-card
></v-dialog
>
script
function botaoEditarPessoa(item) {
state.pessoa = Object.assign({}, item);
state.dialog = true;
}
async function editarPessoa() {
try {
const res = await axios({
url: "http://localhost:3000/update",
method: "put",
data: state.pessoa,
});
state.pessoa = res.data;
await getData();
state.dialog = false;
} catch (error) {
console.log(error);
}
}
I need to understand why the line ins't being edited. Please, help me find the error
This is probably happening because you're creating a new Object every time you open the model to edit it. Then your put method probably identifies it as a new Pessoa, and instead of editing it, it's creating a new object.
I suggest you look into your PUT method, to see if he's identifying this object as an already created or a new one.
nuxt.js i searched lots of tutorial for image uploading using laravel api but i not get logic how to code image uploading things help me to solve this or give tutorial links .
how to make image uploading form in nuxt.js
i Created laravel API for image uploading.
my Router
Route::group(['middleware' => 'auth:api'], function() {
Route::post('/Employeeregister', 'EMPLOYEE_API\RegisterController#register')->name('Employeeregister');
});
CONTROLLER CODE
public function imageUploadPost(Request $request)
{
$request->validate([
'name' => 'required | string',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$imageName = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $imageName);
return back()
->with('success','You have successfully upload image.')
->with('image',$imageName);
}
MY Nuxt code
<template>
<v-row justify="center">
<v-col cols="12" sm="6">
<form #submit.prevent="submit">
<v-card ref="form" >
<v-card-text>
<h3 class="text-center">Register</h3>
<v-divider class="mt-3"></v-divider>
<v-col cols="12" sm="12">
<v-text-field v-model.trim="form.name" type="text" label="Full Name" solo autocomplete="off"></v-text-field>
</v-col>
<v-col cols="12" sm="12"><v-file-field v-model.trim="form.image" type="file" label="image" solo autocomplete="off"></v-file-field>
</v-col>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<div class="text-center">
<v-btn rounded type="submit" color="primary" dark>Register</v-btn>
</div>
</v-card-actions>
</v-card>
</form>
</v-col>
</v-row>
</template>
< script >
export default {
middleware: ['guest'],
data() {
return {
form: {
name: '',image: '',
}
}
},
} <
/script>
There's a few things to consider.
First, your template form.
<form #submit.prevent="submit">
<v-card ref="form" >
<v-card-text>
<h3 class="text-center">Register</h3>
<v-divider class="mt-3"></v-divider>
<v-col cols="12" sm="12">
<v-text-field v-model.trim="form.name" type="text" label="Full Name" solo autocomplete="off"></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-file-field v-model.trim="form.image" type="file" label="image" solo autocomplete="off"></v-file-field>
</v-col>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<div class="text-center">
<v-btn rounded type="submit" color="primary" dark>Register</v-btn>
</div>
</v-card-actions>
</v-card>
</form>
Your input fields are bound to form.name and form.image, which is correct. In order to submit the form, you have tied the submit button to a method named submit (#submit.prevent="submit"), but you haven't created that method. So nothing happens! (You'll see a warning in your console.)
To create the method, you add it to your component under the methods: property.
export default {
middleware: ['guest'],
data() {
return {
form: {
name: '',image: '',
}
}
},
methods: {
async submit() {
let rsp = await this.$axios.$post('/Employeeregister', this.form, {
'content-type': 'multipart/form-data'
})
console.log(rsp.response)
}
}
}
Sending the form data to your Laravel API is straight forward, but there are a few considerations. Where is your nuxt app and laravel API hosted? eg. http://localhost:3000, http://localhost:80 etc. I'll update this answer based on your response.
I'm looking for a function who can resetting my stepper made with vuetify.
the e1 is set as 0 but if I make a function who reset this value to 0, it doesn't work and the stepper set as the same screen.
It is possible to reset a stepper to default state
Find the working codepen here: https://codepen.io/chansv/pen/wvvzddP?editors=1010
<div id="app">
<v-app id="inspire">
<v-stepper v-model="step" vertical>
<v-stepper-header>
<v-stepper-step step="1" :complete="step > 1">Your Information</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="step > 2">Your Address</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Misc Info</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-text-field label="Name" v-model="registration.name" required></v-text-field>
<v-text-field label="Email" v-model="registration.email" required></v-text-field>
<v-btn color="primary" #click.native="step = 2">Continue</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
<v-text-field label="Street" v-model="registration.street" required></v-text-field>
<v-text-field label="City" v-model="registration.city" required></v-text-field>
<v-text-field label="State" v-model="registration.state" required></v-text-field>
<v-btn flat #click.native="step = 1">Previous</v-btn>
<v-btn color="primary" #click.native="step = 3">Continue</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-text-field label="Number of Tickets" type="number"
v-model="registration.numtickets" required></v-text-field>
<v-select label="Shirt Size" v-model="registration.shirtsize"
:items="sizes" required></v-select>
<v-btn flat #click.native="step = 2">Previous</v-btn>
<v-btn color="primary" #click.prevent="submit">Save</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-app>
</div>
const defaultReg = Object.freeze({
name:null,
email:null,
street:null,
city:null,
state:null,
numtickets:0,
shirtsize:'XL'
});
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
step:1,
registration: Object.assign({}, defaultReg),
sizes:['S','M','L','XL']
}
},
methods:{
submit() {
this.registration = Object.assign({}, defaultReg);
this.step = 1;
}
}
})
A simpler approach at resetting your stepper is by using the key prop assigning to it a value and then in the function increasing this value. Something like this:
<template>
<v-stepper
:key="stepperKey"
v-model="e1"
>
...
</v-stepper>
</template>
<script>
export default {
data () {
return {
e1: 1,
stepperKey: 0
}
},
methods: {
increaseKey () { this.stepperKey++ }
}
}
</script>
The key prop or attribute is a build in Vue.js feature. Even if you don't see it it's been used on the back. Changing the key will trigger a re render.
If you have doubt about the key attribute/prop here is a nice article about it
So whenever I click the "edit" button, a dialog pops up with a scrollbar where I can fill out information. But when I click "cancel" or "save" and then click that same "edit" button, the dialog pops up at the same scroll position. I would like to, every time when I click "edit" and the dialog opens up, be always at the top of the dialog page not where I left off last.
<template>
<!-- <div class="text-xs-center" v-if="storeState.admin" lazy> -->
<v-dialog
transition="dialog-bottom-transition"
scrollable
fullscreen
v-model="sheet"
v-if="storeState.admin"
lazy
persistent
>
<template v-slot:activator="{on}">
<v-btn flat color="green" dark icon v-on="on">
<v-icon>edit</v-icon>
</v-btn>
</template>
<div background-color="transparent" style="margin: auto auto 0 auto">
<v-card px-5 max-width="800px">
<v-card-title>
ADD SCHOLARSHIP
</v-card-title>
<v-form v-model="addDisabled" validation ref="editForm">
<v-container>
<v-layout wrap>
<v-flex
xs12
md4
>
<v-text-field
v-model="scholarship.title"
label="Scholarship name"
:counter="maxLength"
:rules="[maxLength_rules.max, minLength_rules.min]"
required
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
v-model="scholarship.faculty"
label="Faculty"
:counter="maxLength"
:rules="[maxLength_rules.max, minLength_rules.min]"
required
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
v-model="scholarship.dollarAmount"
label="Award amount"
required
:rules="[amount_rules.range, minLength_rules.min]"
></v-text-field>
</v-flex>
<v-flex ml-2 xs12 sm6 md4>
<v-menu
ref="menu2"
v-model="menu2"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="availableDate"
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="scholarship.available"
label="Date Available"
prepend-icon="event"
:rules="[minLength_rules.min]"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="availableDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="menu2 = false">Cancel</v-btn>
<v-btn flat color="primary" #click="$refs.menu2.save(availableDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex ml-2 xs12 sm6 md4>
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="dueDate"
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="scholarship.deadline"
label="Due Date"
prepend-icon="event"
readonly
:rules="[minLength_rules.min]"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="dueDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="menu1 = false">Cancel</v-btn>
<v-btn flat color="primary" #click="$refs.menu1.save(dueDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 md1>
<v-text-field
v-model="scholarship.requiredGpa"
label="Min GPA"
required
:rules="[gpa_rules.range, minLength_rules.min]"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea
outline
height="400"
v-model = "scholarship.description"
label="Scholarship Description"
:rules="[minLength_rules.min]"
></v-textarea>
</v-flex>
</v-layout>
</v-container>
</v-form>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click="sheet = false" >cancel</v-btn>
<v-btn color="primary" #click="updateFields(scholarship)" :disabled="!addDisabled" flat >SAVE</v-btn>
</v-card-actions>
</v-card>
</div>
</v-dialog>
<!-- </div> -->
</template>
<script>
import { store } from "../store.js";
import EDITSCHOLARSHIP from '../graphql/updateScholarship.gql'
export default {
data: () => ({
sheet: false,
valid: false,
dueDate: '',
availableDate: '',
storeState: store.state,
addDisabled: true,
menu1: '',
menu2: '',
gpa: '',
title: '',
faculty: '',
amount: '',
maxLength: 255,
description: '',
gpa_rules: {
range: v => v <= 4.00 && v >= 0.00 && v.length <=4 || 'GPA may only be within 0.00 - 4.00',
},
amount_rules: {
range: v => v <= 999999999.00 && v >= 0.00 || 'Amount must only contain numbers between 0.00 - 999999999.00',
},
maxLength_rules: {
max: v => v.length <= 255|| 'Max character length is 255',
},
minLength_rules: {
min: v => v.length > 0 || 'Required',
}
}),
props: {
scholarship: Object
},
methods: {
validate () {
if (this.$refs.editForm.validate()) {
this.addDisabled = false
}
},
editScholarship(scholarship) {
if (this.$refs.editForm.validate()) {
this.$apollo.mutate({
mutation: EDITSCHOLARSHIP,
variables: {
id: scholarship.id,
input: {
available: this.availableDate,
deadline: this.dueDate,
description: this.description,
dollarAmount: this.amount,
faculty: this.faculty,
requiredGpa: this.gpa,
title: scholarship.title,
visible: true,
}
}
}).then( (data) => {
this.$emit('showSnackbar', 'Scholarship successfully updated', 'success')
this.sheet = false
}).catch( (error) => {
this.$emit('showSnackbar', 'Scholarship update failed', 'error')
//this.text = error
//this.color = "error"
//this.snackbar = true
})
}
},
updateFields (scholarship) {
this.dueDate = scholarship.deadline
this.availableDate = scholarship.available
this.gpa = scholarship.requiredGpa
this.title = scholarship.title
this.faculty = scholarship.faculty
this.amount = scholarship.dollarAmount
this.description = scholarship.description
this.editScholarship(scholarship)
}
}
}
</script>
<style>
.scroll {
overflow-y: auto;
}
</style>
This is intended behavior. If the dialog box is not removed from the DOM when closed, its previous state will be retained unless otherwise modified.
You can choose one between three approaches I can think of in hindsight, 2 of which are what you are looking for.
Destroy the modal when not in use and re-instantiate when opening. A simple v-if toggling a boolean would do the trick, or a this.$destroy if your dialog box is a separate vue instance.
Add this.$el.scrollTop = 0 on your submit or cancel events. (A*)
Add scrollWrapper.scrollTop = 0 on your open dialog box method. (B*)
A: this.$el on item number 2 will only work if you are scrolling in the $el element, otherwise, you can access the target element using this.$el.querySelector('.scroll-wrapper')
B: Same as item number 2, but this uses vanilla JS references instead of relying on Vue, you should refer to your actual scroll wrapper.
Please add this code to the event to enable in your dialog.
this.$refs.editForm.$el.scrollIntoView({behavior: 'smooth'})