Vue generate form json data truncate label

Question

I have vueformulate implemented in my project and I am generating the form from json data. I need to implement truncate filter - for example 80 characters, with read more/less for the label. Data is dynamic so i cant change label in this object array. Here's my code. Any idea?

Vue.use(VueFormulate)

new Vue({
  el: "#app",
  data () {
    return {
        data: [
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'first',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'second',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'third',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        }
      ]
    }
  }
})

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/vue-formulate@2.4.1/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>

score 0 · Answer 1 · answered Oct 10 '21 at 07:23

You can create a computed property from data with label truncated:

computed: {
  truncated() {
    return this.data.map(({ label, ...rest }) => ({ label: label.slice(0, 80), ...rest }));
  }
}

Vue.use(VueFormulate)

new Vue({
  el: "#app",
  data () {
    return {
        data: [
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'first',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'second',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        },
        {
          validation: "accepted",
          type: 'checkbox',
          name: 'third',
          label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
        }
      ]
    }
  },
  computed: {
    truncated() {
      return this.data.map(({ label, ...rest }) => ({ label: label.slice(0, 
 80), ...rest }));
    }
  }
})

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/vue-formulate@2.4.1/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 truncated"
            :key="item.name"
            v-bind="item"
        />
      </formulate-form>
</div>

Maybe a daigram or schreenshot of your desired solution would be helpful here. — jpschroeder, Oct 10 '21 at 17:22
@Psidom just added images to my question. The main goal is you have truncated text in label, but there is read more button, when you click it, full label text should be visible. — Marek, Oct 10 '21 at 17:37

Vue generate form json data truncate label

1 Answers1