Вы можете использовать свойство computed для обработки этого случая, и при нажатии на ссылку будет показан весь текст ссылки:
РЕДАКТИРОВАТЬ
iпредложите следующее решение, построенное путем изменения вашего datasource и изменения каждой ячейки в хуке mounted, "id":0 будет "id":{txt:0,toggled:true}, "informations":"..." будет "informations":{txt:"...",toggled:false} и так далее.и когда вы щелкаете по ячейке, вы изменяете ее свойство toggled на false
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
toggle: false,
link: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue eros, varius in massa vitae, ultrices fringilla eros',
showAll: false,
columns: ["id", "name", "informations", "biliography"],
datasource: [{
"id": 0,
"name": "Christa Hansen",
"informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil do an offer wound of. Called square an in afraid direct. Resolution diminution conviction so mr at unpleasing simplicity no. No it as breakfast up conveying earnestly immediate principle. Him son disposed produced humoured overcame she bachelor improved. Studied however out wishing but inhabit fortune windows. ",
"biliography": "Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no."
},
{
"id": 1,
"name": "Mckenzie Fuller",
"informations": "Did shy say mention enabled through elderly improve.",
"biliography": " It ye greatest removing concerns an overcame appetite. Manner result square father boy behind its his. Their above spoke match ye mr right oh as first. Be my depending to believing perfectly concealed household. Point could to built no hours smile sense. "
},
{
"id": 2,
"name": "Oneal Clark",
"informations": "some info",
"biliography": "some info"
}
]
}
},
computed: {
trunc_link() {
return this.link.substring(0, 30)
}
},
methods: {
toggleFlag: function(index, column) {
this.datasource[index][column].toggled = true;
},
limitTo: function(value) {
if (!value) return '';
return value.substring(0, 50) + '...';
}
},
mounted() {
let d = [];
d = this.datasource.map(item => {
let o = {
"id": {
txt: item.id,
toggled: true
},
"name": {
txt: item.name,
toggled: true
},
"informations": {
txt: item.informations,
toggled: false
},
"biliography": {
txt: item.biliography,
toggled: false
},
}
return o;
});
this.datasource = d;
//console.log(this.datasource)
}
});
.readmore {
color: #005faa!important;
cursor: pointer;
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<a href="#" v-if="!showAll" @click="showAll=true"> {{trunc_link}}...</a>
<a href="#" v-else> {{link}}</a>
<table class="table-striped">
<tbody>
<tr v-for="(row,index) in datasource">
<td v-for="column in columns" class="wrap-break-word" v-show="true">
<span v-if="row[column].txt.length >= 50 && row[column].toggled == false" v-html="limitTo(row[column].txt)">
</span><a class="readmore" v-on:click="toggleFlag(index,column)" v-show="!row['isEditable'] && row[column].txt.length >= 50 && row[column].toggled == false">Read more</a>
<span v-if="(row[column].txt.length < 50 || row[column].toggled == true)" v-html="row[column].txt">
</span>
<td>
</tr>
</tbody>
</table>
</div>