javascript 如何用vue.js创建一个显示更多/更少的按钮，应用于单个元素？

v1l68za4 于 2023-01-24 发布在 Java

关注(0)|答案(2)|浏览(110)

可以选择显示more文本或less，但@click事件适用于所有elements，所有元素显示所有文本。
我明白，我需要传递一些值来标识单个元素，该值不会应用于所有元素，但目前卡住了，并会感谢帮助。
超文本：

<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;
        },

数组值：

我怎样才能使一个方法只应用于一个单独的元素？
在这种情况下，不需要创建组件，因为这种情况将只在一个页面上使用。

JavaScript

来源：https://stackoverflow.com/questions/61381344/how-to-create-a-show-more-less-button-which-applies-to-individual-element-with-v

2条答案

按热度按时间

1yjd4xko1#

创建一个对象来保存readMore切换的哈希值，每个项目一个：

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

键将是项id。在模板中测试这些键，并通过传递该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>

通过传递项ID并切换它来设置methods中的值：

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

赞(0）回复(0）举报 2023-01-24

fnvucqvd2#

使用索引而不是此.$集合

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>

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何用vue.js创建一个显示更多/更少的按钮，应用于单个元素？

2条答案

相关问题

热门标签

最新问答