i'm trying my form data submit. when i try my code
form.append('subject',"hello"),
It is good working. but form.append('subject', 'this.subject') => return 'undefined'. how do i solve it?
form.append('subject',"hello"), it is good working. but form.append('subject', 'this.subject') => return 'undefined'.
My Write.vue is :
<template>
<v-form #submit.prevent="sendPost" id="WriteForm" method="post">
<v-btn icon type="submit" form="WriteForm"><v-icon>send</v-icon></v-btn>
<v-text-field name="subject"></v-text-field>
<v-textarea name="context"></v-textarea>
</v-form>
</template>
<script>
export default {
data(){
return{}
},
methods: {
sendPost: function(){
console.log(this.subject); //==> undefined :(
console.log(this.context); //==> undefined :(
}
}
</script>
You should add that properties to your data object and bind them to the v-text-field as follows :
data(){
return{
subject:'',
context:''
}
}
and bind them using v-model directive in your template fields like :
<v-text-field name="subject" v-model="subject"></v-text-field>
<v-textarea name="context" v-model="context"></v-textarea>
Related
I have created a component called Input. All the attributes that are passed to this Input component are inherited successfully, but the ref attribute is always omitted for some reason.
I need the ref attribute to set focus on the element, after the validation fails.
Some.vue
<template>
...
<Input
type="number"
name="mobile"
ref="mobileRef"
v-model="this.form.mobile"
:class="errors.mobile ? 'error' : null"
:error="errors.mobile ?? null"
/>
...
</template>
<script>
import Input from '#Inputs/Input';
export default {
...
components: {
Input,
},
...
}
</script>
Input.vue
<template>
<input
autocomplete="none"
class="form-control"
:ref="ref"
:class="this.class"
:type="this.type ?? 'text'"
:value="modelValue"
:disabled="disabled"
#input="$emit('update:modelValue', $event.target.value)"
/>
</template>
<script>
export default {
name: 'Input',
inheritAttrs: false,
props: ['type', 'class', 'error', 'modelValue', 'disabled', 'ref']
}
</script>
I even hardcoded the ref attribute with some static value, but the result is same, omitted?
What am I doing wrong here..?
ref is a special attribute, it's not supposed to work as a prop.
It's possible to access root element of a component as $refs.mobileRef.$el.focus(). The component can also expose all public methods explicitly, so they would be used as $refs.mobileRef.focus().
You can remove the ref prop in your Input.vue component and add a watcher inside, to watch for some errors. If there is, trigger a .focus() on your input element.
Some.vue
<template>
...
<Input
type="number"
name="mobile"
v-model="this.form.mobile"
:class="errors.mobile ? 'error' : null"
:error="errors.mobile ?? null"
/>
...
</template>
<script>
import Input from '#Inputs/Input';
export default {
...
components: {
Input,
},
...
}
</script>
Input.vue
<template>
<input
autocomplete="none"
class="form-control"
ref="mobileRef"
:class="this.class"
:type="this.type ?? 'text'"
:value="modelValue"
:disabled="disabled"
#input="$emit('update:modelValue', $event.target.value)"
/>
</template>
<script>
export default {
name: 'Input',
inheritAttrs: false,
props: ['type', 'class', 'error', 'modelValue', 'disabled'],
watch: {
error(val) {
if (val)
this.$refs.mobileRef.focus();
},
},
}
</script>
I am working with Vue and Laravel, I want to save data to the database, but I can not get the id of the selected category as I showed in the below picture, I can get other data like body and title. I don't know where is the problem. please help me.
This my code:
<template>
<v-container>
<v-form #submit.prevent="create">
<v-text-field
v-model="form.title"
label="title"
type="text"
required
></v-text-field>
<v-select
:items="categories"
item-text="name"
item-value="id"
:v-model="form.category_id"
label="Category"
autocomplete>
</v-select>
<vue-simplemde v-model="form.body" />
<v-btn color="green" type="submit">
Ceate
</v-btn>
</v-form>
</v-container>
</template>
<script>
import VueSimplemde from 'vue-simplemde'
export default {
components: {
VueSimplemde
},
data(){
return {
form:{
title:null,
category_id:null,
},
categories:{}
}
},
created(){
axios.get('/api/category')
.then(res => this.categories = res.data.data)
},
methods:{
create(){
}
}
}
</script>
<style scoped>
#import '~simplemde/dist/simplemde.min.css';
</style>
You have a colon before v-model
Replace :v-model with v-model
I'm trying to figure out how to allow users to copy their login details when they click the copy icon. How to get the value of the relevant v-text-field?
I thought I should use #click:append and link it to a method. However, I struggle how to get a value.
<template>
<v-card class="col-12 col-md-8 col-lg-6 p-6 px-16" elevation="4">
<div class="title h2 mb-10 text-uppercase text-center">
Success
<v-icon color="green" x-large>
mdi-check-circle
</v-icon>
</div>
<v-text-field
:value="newAccount.login"
label="Login"
outlined
readonly
append-icon="mdi-content-copy"
#click:append="copy('login')"
></v-text-field>
<v-text-field
:value="newAccount.password"
label="Password"
outlined
readonly
append-icon="mdi-content-copy"
></v-text-field>
</v-card>
</template>
<script>
export default {
props: ["newAccount"],
data() {
return {
copied: false,
};
},
methods: {
copy(target) {
if (target === "login") {
console.log("login is clicked");
}
},
},
computed: {},
};
</script>
The value of the v-text-field is available from its value property. Apply a template ref on the v-text-field to get a reference to the component programmatically from vm.$refs, then use .value off of that:
<template>
<v-text-field
ref="login"
#click:append="copy('login')"
></v-text-field>
</template>
<script>
export default {
methods: {
copy(field) {
console.log('value', this.$refs[field].value)
}
}
}
</script>
Alternatively, you could access the nested template ref of v-text-field's <input>, which has a ref named "input", so copy() would access it from this.$refs[field].$refs.input. Then, you could select() the text value, and execute a copy command:
export default {
methods: {
copy(field) {
const input = this.$refs[field].$refs.input
input.select()
document.execCommand('copy')
input.setSelectionRange(0,0) // unselect
}
}
}
demo
I use vue-select in my Vue app. I created a component as a wrapper for v-select. To return only a specific column of the options array, I use the :reduce prop of vue-select.
<template>
<span>
<label v-if="title">{{title}}</label>
<v-select
:options="options"
:label="label"
:placeholder="placeholderText"
:close-on-select="closeOnSelectValue"
:disabled="isDisabled"
:multiple="multiple"
:value="value"
#input="handleInput($event)"
:loading="isLoading"
:reduce="option=> option.val"
></v-select>
</span>
This code works, but I would like to have the static val string to be the dynamic prop returnKey. This would be passed to the component as a prop.
props: {
returnKey: {
type: String,
default: null,
},
}
What syntax should I use to make a combination of the 'option' string and the dynamic value of 'returnKey' in the function passed to :reduce to get this working?
You can use the bracket notation and do option => option[returnKey].
And as what Richard has suggested, in order to avoid runtime error you might want to provide some kind of fallback, or enforce that returnKey must be a required prop.
You can try something like this
<template>
<span>
<label v-if="title">{{title}}</label>
<v-select
:options="options"
:label="label"
:placeholder="placeholderText"
:close-on-select="closeOnSelectValue"
:disabled="isDisabled"
:multiple="multiple"
:value="value"
#input="handleInput($event)"
:loading="isLoading"
:reduce="reduceKey"
></v-select>
</span>
</template>
<script>
export default
{
props: {
returnKey: {
type: String,
default: null,
},
},
methods:
{
reduceKey(option)
{
return option[this.returnKey] || option;
}
}
}
I have a problem with my code. I can't find a reason why my GET parameters are empty when the form is submitted.
What I'm trying to achieve is to submit the form after validation and be redirected to http://someurl.com/?service=3&propert_type=2. Is it even possible? Or do I need to stringify it and then use window.location?
I'm a newbie at Vue, but can't find the internet for a solution so I guess it's something to do with my code.
<template>
<ValidationObserver v-slot="{ valid }" ref="getanoffer">
<v-form
class="form form--getanoffer"
ref="form"
>
<ValidationProvider
rules="required"
v-slot="{ errors }"
name="service"
>
<v-select
v-model="service"
name="service"
:items="services"
placeholder="Select Service"
:error-messages="errors"
solo
></v-select>
</ValidationProvider>
<ValidationProvider
rules="required"
v-slot="{ errors }"
name="property_type"
>
<v-select
v-model="property_type"
:items="property_types"
name="property_types"
item-text="name"
item-value="id"
placeholder="Select Property Type"
:error-messages="errors"
solo
></v-select>
</ValidationProvider>
<v-btn
color="primary"
width="100%"
#click="validate"
class="v-btn--submit v-btn--no-gutter"
:loading="loading"
:disabled=" ! valid"
>
Continue
</v-btn>
</v-form>
</ValidationObserver>
</template>
<script>
import {ValidationProvider, ValidationObserver} from "vee-validate";
export default {
components: {
ValidationProvider,
ValidationObserver,
},
data() {
return {
service: null,
property_type: null,
form: {
},
loading: false,
}
},
props: {
services: {
type: Array,
},
property_types: {
type: Array,
}
},
methods: {
async validate() {
let form = await this.$refs.getanoffer.validate();
if (form) {
this.loading = true;
this.submit();
this.$refs.form.$el.submit();
}
},
submit() {
}
}
}
</script>
Lets simplify your code
Instead of calling validate() on button click, you can add type="submit" to your button and in your form you can add #submit:prevent="validate". This doesn't solve the problem but allows you to submit with Enter and every submit button will trigger the validation.
Now for the solution
1- To navigate to external scope you can use windows.open(). Vuetify lets you navigate to an url but you had to put href on your button and control it manually
windows.open('http://someurl.com/')
CodePen
Vuetify vee-validate docs
Javacript standards say that you should use camelCase for js variables (this.propertyType)
JS standard
ESlint Rules