I am converting my code snippet from pure html to Vue2 but facing some difficulty-CodePudding

This is pure html code with javascript. filter.js

var group_filter=document.getElementById("group-filter");
var btn_show_filter=document.getElementById("icon-filter");
var btn_close_filter=document.getElementById("icon-close-filter");

function showfilter(){
    group_filter.style.display='block';
    btn_show_filter.style.display='none';
    btn_close_filter.style.display='inline';
}
function closefilter(){
    group_filter.style.display='none';
    btn_show_filter.style.display='inline';
    btn_close_filter.style.display='none';
}

And here is the code that I'm trying to process but it doesn't look right.

 <div >
                <h3>Filter <img id="icon-filter" @click="showfilter" : src="../assets/recruit/angle-down-svgrepo-com.svg" alt=""> <img id="icon-close-filter" : @click="showfilter" src="../assets/recruit/close-svgrepo-com.svg" alt=""></h3>
                <div   id="group-filter" : >
</div>
     </div>

Thank you everyone, and I look forward to your help.

CodePudding user response：

You can simply achieve this by creating an object in the data method like this :

data() {
  return {
    display: {
      group_filter: '',
      btn_show_filter: '',
      btn_close_filter: ''  
    }
  }
}

And in methods object, you can assign the values :

methods: {
  showfilter() {
    this.display.group_filter = 'block';
    this.display.btn_show_filter = 'none';
    this.display.btn_close_filter = 'inline';
  },
  closefilter() {
    this.display.group_filter = 'none';
    this.display.btn_show_filter = 'inline';
    this.display.btn_close_filter = 'none';
  }
}

And then in the template, you can assign like this :

<div >
  <h3>Filter <img id="icon-filter" @click="showfilter" :style="{ 'display': display.btn_show_filter }" src="../assets/recruit/angle-down-svgrepo-com.svg" alt=""> <img id="icon-close-filter" :style="{ 'display': display.btn_close_filter }" @click="closefilter" src="../assets/recruit/close-svgrepo-com.svg" alt=""></h3>
  <div   id="group-filter" :style="{ 'display': display.group_filter }"></div>
</div>

CodePudding user response：

I hope this is what you want to achieve.

I have create one demo on stackblitz.

link - https://vue-etrbkr.stackblitz.io

I have attached source code here.

<template>
 <div id="app">
  <div >
  <h3>
    Filter
    <img
      @click="toggleFilter"
      
      :src="
        isFilterOpen
          ? 'https://cdn-icons-png.flaticon.com/512/61/61155.png'
          : 'https://iaeste.org/assets/icons/arrow_dropdown- 
           8e096a444299e295fa03bc919f3cea625987792e13aaf64ec6b0be881a8f7c0a.svg'
      "
      width="20"
      height="20"
    />
  </h3>
  <div  id="group-filter" v-if="isFilterOpen">
    Filter Content
  </div>
   </div>
  </div>
 </template>

<script>
  export default {
  name: 'App',
  data() {
    return {
     isFilterOpen: false,
   };
 },
 methods: {
  toggleFilter() {
    this.isFilterOpen = !this.isFilterOpen;
  },
 },
};
</script>

<style>    
 .filterIcon {
   vertical-align: bottom;
   cursor: pointer;
  }
 </style>