Mam problem z bindowaniem wysokość miedzy stylem ustalonym w obiekcie Vue.js a :style . chciałbym dynamicznie zmieniać wysokość textarea podczas zdarzenia scroll . to podaje mój kod
<textarea id="textarea" @scroll="focusTextarea" :style="styleObject" col="5" class="styleinput textarea" type="text" />
<br>
<button class="btn btn-primary" :class="{'isLoading': isLoad }" >Wyslij</button>
</form>
<div v-if="isLoad" class="toast">
dziekujemy za wystałnie Formularza
</div>
</div>
</template>
<script>
// pierwsza opcja jest nie praktyczna//
let tab2 = [];
/// end ///
export default {
name : "formularz",
data(){
return {
isLoad : false,
styleObject: {
height : 45
}
}
},
watch :{
styleObject(old ,newV){
}
},
methods:{
focusTextarea:function(e){
console.log(e);
let curenValue;
let element = document.querySelector("#textarea");
let newValue = element.scrollTop;
curenValue = newValue;
tab2.push( newValue);
//.log(`to jest nowa warosc ${newValue} to jest stara warosc ${curenValue} warosc tablicy ${tab2}`);
//console.log( tab2);
//console.log(element.scrollHeight);
//console.log(tab2[tab2.length-1])
if( tab2[tab2.length-2] == undefined ){
this.styleObject.height += 5;
this.convert(this.styleObject.height);
console.log("+");
} if(tab2[tab2.length-1] > tab2[tab2.length-2] ){
console.log("+");
this.styleObject.height += 5;
this.convert(this.styleObject.height);
}else if( tab2[tab2.length-1] < tab2[tab2.length-2] ){
console.log("-")
this.styleObject.height -= 5;
this.convert(this.styleObject.height);
}
if( tab2[tab2.length-1] == 0 ){
tab2.splice(tab2.lenght-1);
console.log(tab2);
}
},
convert : function(value){
}
}
}
