javascript - How to create a show moreless button which applies to individual element with vue.js? - Stack Overflow

admin管理员组

文章数量:1294664

There is an option to display more text, or less, but the @click event applies for the all elements and the all elements display all text.

I understand, that I need to pass some value to identify individual element, that the value would not apply to all elements, but at the moment stuck and would appriciate help.

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 and methods:

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

Array values:

How could I make a method apply only for an individual element?

In this situation, there is no need to create a ponent, because this case will be used only on one page.

There is an option to display more text, or less, but the @click event applies for the all elements and the all elements display all text.

I understand, that I need to pass some value to identify individual element, that the value would not apply to all elements, but at the moment stuck and would appriciate help.

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 and methods:

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

Array values:

How could I make a method apply only for an individual element?

In this situation, there is no need to create a ponent, because this case will be used only on one page.

• javascript
• html
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Apr 23, 2020 at 7:43 ViktorasssIT asked Apr 23, 2020 at 7:10 ViktorasssITViktorasssIT 38722 gold badges99 silver badges2828 bronze badges 2

• Try creating only one <td> and one button with toggle() function onclick, which change text version to display, (full or cut) – winiar Commented Apr 23, 2020 at 7:20
• Thanks. Could you make an example with jsfiddle? – ViktorasssIT Commented Apr 23, 2020 at 7:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Create an object to hold a hash of readMore toggles, one for each item:

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

The keys will be the item id. Test those in the template and also set them in the buttons by passing that id:

<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>

And set values in methods by passing the item id and toggling it:

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

Use index instead of this.$set

data: () => ({
   readMore: [false],
}),


methods: {
    showMore(index) {
  this.readMore[index] = true;
},
showLess(index) {
  this.readMore[index] = false;
},    



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

本文标签：