I've form.blade.php file , here's it's content
<app-add-new-file-form inline-template :subjects="{{ json_encode($subjects) }}">
<v-form method="POST" action=" {{ route('files.store') }} " enctype="multipart/form-data">
#csrf
<div class="my-8">
<v-select v-model="subject" :items="subjects" :item-value="subject" name="subject" menu-props="auto"
label="Subject" hide-details single-line></v-select>
<p class="text-danger">{{ $errors->first('subject') }}</p>
</div>
</v-form>
</app-add-new-file-form>
and in my vue components I've this code below :
<script>
export default {
props: ["subjects"],
data: () => {
return {
subject: "",
};
}
};
</script>
However, when i submit the form, the subject value is set to null on any subject I select
Note : the subjects array comes from laravel then I encode it to json.
It is stated that Vuetify v-select does not have an input value. Longer answer by Vuetify dev here. They are just not setting the value to input.
The solution would be to add a hidden input that keeps the selected value and is submitted with form.
Example codepen
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
subjects: ['Subject1', 'Subject2', 'Subject3', 'Subject4'],
selectedSubject: ''
}),
})
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col class="d-flex" cols="12" sm="6">
<v-select
v-model="selectedSubject"
:items="subjects"
label="Subjects"
solo
></v-select>
<input type="hidden" v-model="selectedSubject" name="subject">
</v-col>
</v-row>
</v-container>
</v-app>
</div>
I included an example image where to find input value from devtools. If you check v-select input value, it is empty. Then of you check the hidden inputs value it has the selected value.
Example image where to find input value
Related
I have a multiple selection Vue component that feeds items to display in an input box. As of now, it adds items based on the order of selection, but I wanted to template it to sort by sort_order after selection (objective_id, category_id, objective_code, objective_description, disabled_flag, sort_order are all passed into objectiveArray object). Is this possible to do in Vuetify?
<v-flex xs12>
<v-tooltip :disabled="!showTooltip" top>
<v-select
slot="activator"
class="objective-select"
v-model="record.objectives"
:items="objectiveArray"
label="Objective(s)"
placeholder="Enter Objective(s)"
:error-messages="objectiveErrors"
:return-object="true"
item-text="objectiveDescription"
multiple
#blur="v.$each[index].objectives.$touch()">
<template v-slot:selection="{ item, index }">
<v-chip
color="primary"
dark
class="objective-chip"
:class="{
mobile:isMobile,
tablet:isTablet
}">
<span>{{ item.objectiveDescription }}</span>
</v-chip>
</template>
</v-select>
<span>Select one or more procedure objective(s)</span>
</v-tooltip>
</v-flex>
You can sort your bound v-model after the #input event fires. Here is a simple example:
<template>
<div>
<v-select
v-model="selected"
:items="items"
item-text="id"
item-value="id"
multiple
#input="sortSelection"
return-object
>
</v-select>
</div>
</template>
<script>
export default {
data: () => ({
selected: [],
items: [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6}]
}),
methods: {
sortSelection() {
this.selected.sort((x, y) => {
if (x.id > y.id) return 1
else if (y.id > x.id) return -1
else return 0
})
}
}
}
</script>
As long as your sort_order is a number you can just substitute it for the id field in my example.
I am using vue-select in my project along with tabulator. I was able to fetch data from json file and view it. But when selecting the options i get an error saying " Component emitted event "option:selecting" but it is neither declared in the emits option nor as an "onOption:selecting" prop. ". I could not resolve this error after multiple try. Below is the code.
**<template>
<form>
<div class="container h-25 w-10/12 mx-auto pb-3 border 2 border-gray-300 flex flex-col rounded-md items-left bg-gray-100" >
<label class="px-3 py-1 w-10/12 text-xs text-black font-medium">Employee</label>
<div class="px-2">
<v-select v-model="Selected" multiple :options="options" label="Employee" placeholder="---SELECT---" class="style-chooser"></v-select>
</div>
<!-- <span>Selected: {{ Employee_Id }}</span> -->
</div>
</form>
<!-- <ul><li v-for="item in datas" :key="item.Employee">{{ item.Employee }}</li></ul> -->
</template>
<script>
import dataset from './dataset.json'
export default {
data(){
return {
openCard: false,
Selected: ""
}
},
computed: {
options: () => dataset
},
methods:{
open(){
this.openCard = ! this.openCard
},
},
}
</script>**
Your help is highly appreciated la.
Can you tell me why the icon to the right of the v-text-field is not displayed?
I want to make the calendar open when you click on the icon.
codepen
<div id="app">
<v-app id="inspire">
<v-menu>
<template v-slot:activator="{ on }">
<v-text-field label="Hello world" style="max-width: 200px">
<!--The icon is not displayed-->
<v-icon v-on="on" color="primary" dark>event</v-icon>
</v-text-field>
</template>
<v-date-picker>
</v-date-picker>
</v-menu>
</v-app>
</div>
P.S.
Here is a good example. It's not mine.
Codepen
The HTML input field is empty https://www.w3schools.com/tags/tag_input.asp
There's an attribute to prepend and append icons in textfields in Vuetify: https://vuetifyjs.com/en/components/text-fields/#icons
You simply need to add it:
<v-text-field label="Hello world" style="max-width: 200px" append-icon="event">
I managed to do it. I did this without the activator template.
codepen vuetify
<div id="app">
<v-app id="inspire">
<v-text-field
label="Hello world"
style="max-width: 200px"
append-icon="event"
#click:append="show">
</v-text-field>
<v-menu
v-model="menu"
:position-x="x"
:position-y="y"
absolute >
<v-date-picker />
</v-menu>
</v-app>
</div>
show (e) {
console.log(123);
e.preventDefault();
this.menu = false;
this.x = e.clientX;
this.y = e.clientY;
this.$nextTick(() => {
this.menu = true
})
},
Im using laravel, vue, and bootstrap-vue.
I have created a vue component that displays a table of elements (subnets in this example).
For each of them I show a component (modal_edit-subnet) thats should open a modal that allows to edit the data of the element of the related row.
The problem is that it shows modals for all of the table elements. For example, if the table has 3 rows, it shows 3 modals (after closing one it shows the next). Each of the modals with the data of each of the rows.
I've tried to add "key"s but no success.
What am i doing wrong?
Thanks!
Component that shows the table
<template>
<div>
<b-card class="text-center">
<b-table small striped hover :items="data_subnets" :fields="fields" :tbody-tr-class="rowClass">
<template slot="[ip_address]" slot-scope="data_subnets">
<b>{{ long2ip(data_subnets.item.ip_address) }}</b>
</template>
<template slot="[actions]" slot-scope="data_subnets">
v-on:deleteSubnet="deleteSubnet"></modal_delete-subnet>
<modal_edit-subnet :key="'modal_edit_subnet' + data_subnets.item.id" :subnet="data_subnets.item" v-on:editSubnet="editSubnet"></modal_edit-subnet>
</template>
</b-table>
</b-card>
</div>
</template>
Modal modal_edit-subnet
<template>
<div>
<b-button size="sm" v-b-modal.modal-edit-subnet>Edit</b-button>
<b-modal
id="modal-edit-subnet"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
The problem is that:
You're rendering a modal for each row of the table and;
Reading the docs, it seems like the modal is triggered by the id, and your b-modal id is not dynamic depending on the row.
How to fix it:
Use just one modal on the b-table level
Dynamically inject id into your modal_edit-subnet component:
<template>
<div>
<b-button size="sm" v-b-modal[id]>Edit</b-button>
<b-modal
:id="id"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
props: {
id: {
type: String | Number
}
}
}
</script>
Use v-model (this is the way I would do it)
<template>
<div>
<b-button size="sm" #click="show = true">Edit</b-button>
<b-modal
v-model="show"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
I am learing vue with laravel.
I want to display message in the input tag with v-model, but it's not working.
<div class="card" id="myAppId">
<p>#{{ message }}</p>
<input type="text" v-model="message" class="form-control">
</div>
<script src="{{ asset('js/vue.js') }}"></script>
<script>
new Vue({
el: "#myAppId",
data: {
message : 'Hello Vue Js'
}
});
</script>
It display only <p>#{{ message }}</p> with an empty input field.
You can just initialize that v-model variable with the initial value.
This should achieve what you are looking for:
data: {
message: 'initial_message',
}