Clash Royale CLAN TAG#URR8PPP

How to avoid selected values to be copied to the next row in Vuetify

I have used Vuetify DataTables, in that DataTable I have multiple rows along with save button above the table.

DataTable

save button

Inside the Datatable,

Datatable

textfield

select

When I write something in the text field and select the values from drop down select and click the save button, that row is moved from one page to another page.

text field

select

button

Problem

Whatever selected from the drop-down and written in the textfield is get copied to the next row or you can say it is there for the next row which occupies the place for the moved row.

textfield

I want that it should not be there, i.e the textfield should be blank and no value will be selected for the next row.

textfield

Code:

<v-card v-if="resultedvalue">
<v-card-title>
<v-text-field
append-icon="search"
v-bind:label="$t('message.search')"
single-line
hide-details
v-model="search"
></v-text-field>
</v-card-title>

<v-data-table
v-bind:headers="headers"
v-bind:items="resultedvalue"
select-all
v-bind:search="search"
v-bind:pagination.sync="pagination"
class="elevation-1"
>
<template slot="headers" slot-scope="props">
<tr>
<th v-for="header in props.headers"
:key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc',
header.value === pagination.sortBy ? 'active' : '']"
@click="changeSort(header.value)"
v-bind:align="header.align"
>
$t(header.text)
<v-icon v-if="header.text.length > 0">arrow_upward</v-icon>
</th>
</tr>
</template>
<template slot="items" slot-scope="props">
<tr :active="props.selected" >
<td class="text-xs-left"> props.item.xyz</td>
<td class="text-xs-left"> props.item.abc</td>
<td class="text-xs-left">
<div>
props.item.ied<br>
props.item.dfshj&nbsp;
props.item.dfgnu&nbsp;
</div>
</td>
<td class="text-xs-left">
<div @click="show_dialog(props.item.dsfg,props.item.dfg)"
style= "cursor: pointer"
title="Click here to see details"
>
props.item.dfgfd
</div>
</td>
<td class="text-xs-left">
<v-text-field v-model="props.item.testvalue"></v-text-field>
</td>
<td class="text-xs-left">
<v-text-field
name="input-1"
label="Answer"
v-on:change="change_answer(props.item,$event)"
rows="1"
textarea
></v-text-field>
</td>
<td class="text-xs-left">
<v-select
v-bind:items="props.item.valuetobeselect"
v-on:change="changed(props.item,$event)"
label="Select"
single-line
bottom>
</v-select>
</td>

</tr>
</template>

</v-data-table>


Before Save

After Save

Change Event Methods:-

changed: function(element, item)
element.somevalues = item;
this.selected_element= element;
,
change_answer:function(element,item)
var currentdate = new Date().toJSON();
element.somevalue = item;
element.somevalue1 = currentdate;
,


For the save button it is just calling the rest service and once the rest service is executed it called the initialized method which initializes the table .

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.