I am trying to find a way using vue js, components, and element ui to validate a form that is within a table and has data pushed into it from a template.
At the moment this is a snippet of the code that I have written, where if el-input is empty the message “hi” should appear as a blur event.
However, it shows up even when there is a value in the input field, and seems like the validation cannot read the value that is inserted from the template.
Any ideas on how to connect the two?
<el-form ref=“formA”>
<el-table :data=“data_list” border class=“my-table" size="mini" row-key="id">
<el-table-column property=“my_name":label='$t("attributes.person_name")' width="200">
<template slot-scope="scope">
<el-form-item :prop=“’data_list.' + scope.$index + ‘.my_name'"
:rules="{
required: true,
message: 'hi',
trigger: 'blur'
}">
<el-input v-model="scope.row.my_name" />
</el-form-item>
</template>
</el-table-column>
</el-table>
Related
I am working on a Vue app made with element UI and I have a bunch of el-select whose el-options need to have default values, meaning the form select fields already have one option pre-selected (of course the user can still choose other options).
I cannot find any attribute in the official doc https://element.eleme.io/#/en-US/component/select#select
But there should be a way to achieve this right?
This is my code
<el-form-item label="some label" prop="someprop">
<el-select v-model="form.status" filterable clearable>
<el-option
v-for="(item, index) in config.status"
:key="index"
:label="item"
:value="index"
how to have default option here??
>
</el-option>
</el-select>
</el-form-item>
Just put in the form.status the indexes that should be pre-selected. Vue will take care of the rest.
data(){
return {
form: { status: ['thisWillBePreSelected'], },
}
}
Here's my v-autocomplete component.
<v-autocomplete
v-model="selectedPlace"
:items="locationList"
:search-input.sync="query"
color="#e1b753"
clearable
item-text="title"
item-value="id"
label="Address"
return-object
required
close-on-content-click
class="pt-3 pb-0"
item-width="200"
:filter="v => v"
#change="setPlace()"
#blur="setPlace()"
>
<template v-slot:item="data">
<template>
<v-list-item-content>
<v-list-item-title v-html="data.item.title" />
</v-list-item-content>
</template>
</template>
</v-autocomplete>
When it's empty and the user first sets their address it works just fine but if they reload the page the autocomplete field is empty. I want to set its value according to user's information I get from the server but I can't figure out how.
What I've tried so far:
Set locationList[0] to the item I need and used auto-select-fist on autocomplete. It shows the needed location in the dropdown but doesn't display the value in the input.
Same as first but also set v-model to "locationList[0]". It displays the value in the input but doesn't let me change or clear it. When I select and remove the text it just jumps back in.
I guess auto-select-first should do the job, but it doesn't, am I trying to use it wrong?
I want to use autocomplete from Vuetify and I am facing issues there because on my website I have one of the outer divs position: relative the dropdown part of the autocompelete, which is position: absolute, is attaching itself not to the bottom of the input but in random place.
Autocomplete has a prop attach which Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element. so I thought I use that and set it to class of my input.
And this works but it causes warning in the console
[Vuetify] Unable to locate target v-autocomplete
found in
---> <VMenu>
<VAutocomplete>
<VCard>
<VApp>
<Root>
Here the link where I reproduced the console warning.
If you are not using v-app component in App.vue, make sure to add data-app attribute to the div with the id app in App.vue.
The result will be like the following:
<template>
<div id="app" data-app>
.... All components, routers, views here ...
</div>
</template>
This worked for me:
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>
<v-card-text>
<v-subheader class="pa-0">Where do you live?</v-subheader>
<v-autocomplete
v-model="model"
:hint="!isEditing ? 'Click the icon to edit' : 'Click the icon to save'"
:items="states"
:readonly="!isEditing"
:label="`State — ${isEditing ? 'Editable' : 'Readonly'}`"
persistent-hint
prepend-icon="mdi-city"
:attach="'#attach'"
>
<template v-slot:append-outer>
<div id="attach"></div>
<v-slide-x-reverse-transition
mode="out-in"
>
<v-icon
:key="`icon-${isEditing}`"
:color="isEditing ? 'success' : 'info'"
#click="isEditing = !isEditing"
v-text="isEditing ? 'mdi-check-outline' : 'mdi-circle-edit-outline'"
></v-icon>
</v-slide-x-reverse-transition>
</template>
</v-autocomplete>
</v-card-text>
</v-card>
</v-app>
</div>
I'm using Element UI library with Vuejs framework (configured using Vue CLI).
I currently have a nested input form that is taking information and pushing it to an object array inside of a parent component, but I'm having a lot of trouble sharing this information to a child component.
I believe using props is the correct approach, but I'm not sure I'm declaring the props correctly. I also have the parent / child set up with vue-router.
Form in parent component...
<div>
<el-dialog title="Create a new space to huddle" :visible.sync="createHuddleVisible" width="1000px" height="200%">
<el-form :huddle="huddle" :index="index">
<el-form-item label="Huddle Headline" :label-width="formLabelWidth">
<el-input v-model="newHuddle" autocomplete="off" placeholder="What should we call this meeting?"></el-input>
</el-form-item>
<el-form-item label="Goal" :label-width="formLabelWidth" :autosize="{ minRows: 1, maxRows: 2 }">
<el-input type="textarea" v-model="newGoal" placeholder="Use this text box to quickly establish the goal of this huddle.">
</el-input>
</el-form-item>
<el-form-item label="Body" :label-width="formLabelWidth">
<el-input style="white-space: pre-line;" type="textarea" :autosize="{ minRows: 10, maxRows: 15 }" v-model="newBody"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button #click="createHuddleVisible = false">Cancel</el-button>
<el-button type="primary" #click="addHuddle">Confirm</el-button>
</span>
</el-dialog>
</div>
The 'addHuddle' method successfully takes all strings and creates new objects.
I would like to use the data captured here and displayed in a child component.
For now, I've just been trying to print one of the object values onto a card as a test with no luck. Blank card.
<template>
<el-card class="huddle-box-card" shadow="always">
{{ huddle[0].goal }}
</el-card>
</template>
<script>
export default {
name: 'HuddleSpaceOne',
props: {
huddle: {
type: Object
},
index: {
type: Number
},
}
}
</script>
I want in a row table can be edited with enable and disable parameters, if edit button action in click then one row table is enable but if save button action in click then disable. and for the default table value is disabled.
It's my code:
<el-table :data="tableData" :key="index" style="width: 100%" stripe>
<el-table-column label="Name">
<template slot-scope="scope">
<el-input v-model="scope.row.name" :disabled="isEdit"></el-input>
</template>
</el-table-column>
<el-table-column label="Address">
<template slot-scope="scope">
<el-input v-model="scope.row.address" :disabled="isEdit"></el-input>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="default" #click="handleSaveRow">Save</el-button>
<el-button type="primary" #click="handleEditRow">Edit</el-button>
</template>
</el-table-column>
</el-table>
but when I click edit button all rows of columns becomes enabled.
expected: edit click can change one row of table to enable
fiddle: https://jsfiddle.net/dede402/otxahoev/
It's normal as you use the same boolean for all rows. You must find a way to have one boolean per row indicating the edit mode.
Here is a working solution : https://jsfiddle.net/budgw/d3fxw5wq/1/
If you want to separate your data from the UI logic (generally a good idea) you should use a computed property in order to create a list with the edited field.
#budgw answers is correct - i would like to add to his answer. Rather than disabling the input you can make it a readonly attribute. I think its better that way and also makes your table look cleaner.
<el-input v-model="scope.row.name" :readonly="!scope.row.edited"></el-input>
Visit https://jsfiddle.net/noted/0atjsrnw/4/ for the full code.