Как создать кнопку показать больше / меньше, которая применяется к отдельному элементу с vue. js? - PullRequest
Новая
       19

Как создать кнопку показать больше / меньше, которая применяется к отдельному элементу с vue. js?

1 голос
/ 23 апреля 2020

Существует опция для отображения more текста или less, но событие @click применяется ко всем elements, и все элементы отображают весь текст.

Я понимаю, что Мне нужно передать какое-то значение, чтобы идентифицировать отдельный элемент, чтобы это значение не относилось ко всем элементам, но в данный момент застряло и помогло бы получить помощь.

HTML: 

        <tr v-for="script in scripts.slice(0, 5)">
            <td>{{script.key}}</td>
            <td v-if="!readMore">{{script.script_content.substring(0, 200) + ".."}}</td>
            <td v-if="readMore">{{script.script_content}}</td>
            <button @click="showMore" v-if="!readMore" class="btn btn-primary">Show more</button>
            <button @click="showLess" v-if="readMore" class="btn btn-primary">Show less</button>
        </tr>

Vue данные и методы: 

data: () => ({
       readMore: false,
    }),
    methods: {
        showMore() {
            this.readMore = true;
        },
        showLess() {
            this.readMore = false;
        },

Значения массива:

enter image description here

Как можно заставить метод применяться только для отдельный элемент?

В этой ситуации нет необходимости создавать компонент, поскольку этот случай будет использоваться только на одной странице.

1 Ответ

1 голос
/ 23 апреля 2020

Создать объект для хранения переключателей ha sh из readMore, по одному для каждого элемента: 

data: () => ({
    readMore: {},
}),

Ключами будет идентификатор элемента. Проверьте их в шаблоне, а также установите их в кнопках, передав этот идентификатор: 

<td v-if="!readMore[script.id]">{{script.script_content.substring(0, 200) + ".."}}</td>
<td v-if="readMore[script.id]">{{script.script_content}}</td>
<button @click="showMore(script.id)" v-if="!readMore[script.id]" class="btn btn-primary">Show more</button>
<button @click="showLess(script.id)" v-if="readMore[script.id]" class="btn btn-primary">Show less</button>

И установите значения в methods, передав идентификатор элемента и переключив его: 

methods: {
    showMore(id) {
        this.$set(this.readMore, id, true);
    },
    showLess(id) {
        this.$set(this.readMore, id, false);
    },
}
...