Блог

Главная - Вопросы по программированию - Vue сгенерировать форму json данные усечь метку

Vue сгенерировать форму json данные усечь метку

#javascript #vue.js #vuejs2 #vue-formulate

Вопрос:

У меня есть vueformulate, реализованный в моем проекте, и я создаю форму из данных json. Мне нужно реализовать фильтр усечения — например, 80 символов, с возможностью чтения больше/меньше для метки. Данные динамичны, поэтому я не могу изменить метку в этом массиве объектов. Вот мой код. Есть идеи?

 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>

длина метки по умолчанию сокращена до 80 символов, но вы можете нажать quot;Подробнееquot; и просмотреть полный текст

полный текст виден после нажатия кнопки quot;Подробнееquot;.

Ответ №1:

Вы можете создать вычисляемое свойство из data с усеченной меткой:

 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>

Комментарии:

1. но как создать больше/меньше развертки с помощью этого решения?

2. @Marek Не уверен, что я понимаю. Не могли бы вы уточнить?

3. Возможно, здесь будет полезен дайграм или шриншот вашего желаемого решения.

4. @Psidom только что добавил изображения к моему вопросу. Основная цель состоит в том, что у вас есть усеченный текст в метке, но есть кнопка «Подробнее», при нажатии на которую должен быть виден полный текст метки.

Метки: