I am seeking assistance with implementing a truncate filter for vueformulate in my project. I am generating the form from json data and need to limit the label to 80 characters, with a read more/less option. The data is dynamic, so changing the label in the object array is not feasible. Can someone offer any suggestions?
Vue.use(VueFormulate)
new Vue({
el: "#app",
data () {
return {
data: [
{
validation: "accepted",
type: 'checkbox',
name: 'first',
label: 'Lorem Ipsum...',
},
{
validation: "accepted",
type: 'checkbox',
name: 'second',
label: 'Lorem Ipsum...',
},
{
validation: "accepted",
type: 'checkbox',
name: 'third',
label: 'Lorem Ipsum...',
}
]
}
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.formulate-input {
margin-bottom: 20px;
}
.formulate-input-error {
color: red;
margin-top: 5px;
}<script src="https://cdn.jsdelivr.net/npm/@braid/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f2f1e1a9e2ebf6e9f1e8e5f0e1c4b6aab0aab5">[email protected]</a>/dist/formulate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<formulate-form>
<formulate-input
v-for="item in data"
:key="item.name"
v-bind="item"
/>
</formulate-form>
</div>