我無法從一個跨度使用javascript和vue.js一個截斷的文本

Question

我想創建一個截斷與一個buttom vue.js和javascript中的更多信息，但是當我得到的值與JavaScript它發送給我空，我被檢查，我讓reques的方式是正確的這是怎麼得到的代碼：

HTML：

<div class="col-lg-10 "> 
     <span>{{video.description}}</span> 
     <button type="button" id="info" name="button">more inf...</button> 
    </div> 

vue.js

export default { 
mounted(){ 
     var lengthText = 90; 
//Aqui en la variable text guardas el texto antes de ocultarlo 
var text = $('span').text(); 
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "..."; 
console.log(text); 
console.log(shortText); 
$('span').text(shortText); 
//entonces para mostrarlo nuevamente solo necesitas mostrar la variable text 
$('button').click(function(event) { 
    $('span').text(text); 
}); 
    } 
} 

它不會使截斷或在buttom中的動作我真的很感謝你我可以幫助我解決這個問題

Answer 1

你完全錯過了Vue的觀點。除了一些特殊情況（主要是依賴jQuery使用的第三方插件），在Vue組件中查看jQuery代碼意味着您正在做一些事情錯誤。

下面是一個使用Vue公司的功能，以實現自己的目標重寫：

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

無需jQuery和更具可讀性了。