[Vuejs]-I can't get the text from a span using javascript and vue.js for one truncate

by

5👍

✅

You’re totally missing the point of Vue. Barring a few special cases (mostly with third-party plugins that rely on jQuery to use), seeing jQuery code in a Vue component means you’re doing something wrong.

Here’s a rewrite that uses Vue’s functionality to accomplish your goal:

<div class="col-lg-10 ">
    <span v-if="showMoreInfo">{{ description }}</span>
    <span v-else>{{ shortDescription }}</span>

    <button v-if="!showMoreInfo" @click="moreInfo">more info...</button>
</div>

export default {
    data: function() {
        return {
            description: 'This is my long, long description.',
            showMoreInfo: false,
        }
    },
    computed: {
        shortDescription: function() {
            // you're free to do something more complex here
            // for illustration purposes, we're just trimming
            // the string down to size
            return this.description.substring(0, 90);
        }
    },
    methods: {
        moreInfo: function() {
            this.showMoreInfo = true;
        }
    }
}

No jQuery required, and far more readable too.

👤ceejayoz

Leave a comment