Базовый код jquery javascript onclick для Vue

Question

Я привык к jquery, и я переписываю свой код в Vue. Нужна небольшая помощь в этом базовом событии onclick.

Оригинал HTML:

<div id="main"> 

    <div id="right-nav" onclick="closeRightNav();"></div> 

    <i onclick="openRightNav();"></i> 

</div> 

Оригинал JavaScript:

function openRightNav() { 
    $("#right-nav").width("100%"); 
} 

function closeRightNav() { 
    $("#right-nav").width("0"); 
} 

Это где я в настоящее время:

Новый HTML:

<div id="main"> 

    <div id="right-nav" @click="closeRightNav"></div> 

    <i @click="openRightNav"></i> 

</div> 

Новый JavaScript с помощью Vue:

var app = new Vue({ 
    el: '#main', 

    data: { 
     width: '100%' 
    }, 

    methods: { 
     openRightNav() { 
      $("#right-nav").width("100%"); // not sure how to write this part in Vue? 
     } 
    } 
}); 

Как это правильно записать в Vue?

Answer 1

Хорошо. Вы можете приблизиться к этому с разных точек зрения. Мне нравится использовать V-шоу или v-если директивы так:

<template> 
    <div> 
    <div v-if="rightOpen" id="right-div" style="width:100%">Right Div</div> 
    <a @click="rightOpen = ! rightOpen">Toggle</a> // this will actually toggle right sidebar open and close 
    </div> 
</template> 

<script> 
    export default { 
    mounted() { 
    }, 
    data: function() { 
     return { 
     rightOpen: false 
     } 
    } 
    } 
</script> 

Теперь вы можете использовать V-шоу вместо V-если разность является v-шоу элемент будет оказываться на странице, но не показаны и v-if не будет отображать элемент.

Вы также можете использовать V-класс, как так

... 
<div :class="{ 'someClass': !rightOpen,'sidebar-opened': rightOpen}" id="right-div">Right Div</div> 
.... 

В этом примере SomeClass будет один загружен, когда компонент оказывается, позволяет сказать, что ширина: 0 будет в этом классе. sidebar-open class должен содержать ширину: 100%. Все остальное остается прежним в предыдущем примере.

Answer 2

в openRightNav Вы изменяете свои данные и не манипулируете DOM напрямую. Просто скажите в своем методе: this.width = 100.

в вашем HTML, то вам необходимо связать свой атрибут width так:

<div id="right-nav" @click="closeRightNav" v-bind:style="{'width': width + '%'}"></div>

не забудьте установить значение по умолчанию для width 0.

в closeRightNav вы бы только напишите: this.width = 0

Answer 3

Благодаря Юсефу Каме, вот как я это сделал:

Новый HTML:

<div id="main"> 

    <div id="right-nav" @click="closeRightNav" v-bind:style="{'width': width + '%'}"></div> 

    <i @click="openRightNav"></i> 

</div> 

Новый Vue JavaScript:

var app = new Vue({ 
    el: '#main', 

    data: { 
     width: 0 
    }, 

    methods: { 
     openRightNav() { 
      this.width = 100; 
     }, 

     closeRightNav() { 
      this.width = 0; 
     } 
    } 
});