I create a puted to make the "show more" button disappear when the total data is equal to showing data. But I cannot find any method to fix the issue after VueJS v3.6 introduced this ESlint rule. How can I fix it?

<template>

<div class="row sorting">
 <select v-model='sort' class="form-control" id="sorting">
  <option value="">Default</option>
  <option value="rentlow">Rent (ascending)</option>
  <option value="renthigh">Rent (descending)</option>
  <option value="arealow">Area (ascending)</option>
  <option value="areahigh">Area (descending)</option>
 </select>
</div>

The above is sorting properties, and the below is the axios API calling data. And I use the v-for.

<div class="row">
 <div v-for='(property, idx) in filteredproperties' :key='idx' class='col-md-6 text-left'>
  <img v-if='property.thumbnail' :src='backendurl + property.thumbnail.url'>
  <img v-if='!property.thumbnail' src='pictures/inner.png'>
  <h4>${{ property.rent }} / mo</h4>
  <h3>{{ property.title }}</h3>
  <span> {{ property.address }}</span>
  <div>{{ property.area }}
  <br>{{ property.room }}
  <br>{{ property.livingroom }}
  <br>{{ property.date }}
 </div>
 <button @click='showmore' v-if='totalblog > showing'>Show More</button>
</div>

<form>
 <div class="form-group">
  <label for="exampleFormControlInput1">address</label>
  <input type="text" v-model='filtereddata.title' class="form-control" id="exampleFormControlInput1">
 </div>
 <div class="form-group">
  <label for="exampleFormControlSelect1">District</label>
  <select class="form-control" v-model='filtereddata.district' id="exampleFormControlSelect1">
   <option value="all"> All </option>
   <option value="dis1">District 1</option>
   <option value="dis2">District 2</option>
   <option value="dis3">District 3</option>
  </select>
 </div>
 <button type="submit" class="btn btn-primary mt20">Search</button>
</form>

</template>

the javascript which controls the filter, sort, and button. The problem is that I cannot use "this.totalblog = temp.length" as it says an unexpected side-effect. I don't how I can disappear the show more button when all data is loaded. Any alternative?

<script>
export default {
  data () {
    return {
      frontendurl: process.env.frontendurl,
      backendurl: process.env.backendurl,
      filtereddata: {
          title: '',
          district: 'all'
      },
      sort: '',
      showing: 2,
      totalblog: ''
    }
  },
  async asyncData ({ $axios }) {
    const properties = await $axios.$get(process.env.backendurl + '/properties')
    return { properties }
  },
  methods: {
    showmore () {
      this.showing = this.showing + 2
    }
  },
  puted: {
    filteredproperties () {
      let temp = ''
      if (this.filtereddata.district === 'all') {
        temp = this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title))
      } else {
        temp = this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title) && x.district === this.filtereddata.district)
      }
      this.totalblog = temp.length /* unexpected side effect */
      /* sorting algorithm */
      if (this.sort === 'rentlow') {
        temp.sort((a, b) => {
          return a.rent - b.rent
        })
      }
      if (this.sort === 'renthigh') {
        temp.sort((a, b) => {
          return b.rent - a.rent
        })
      }
      if (this.sort === 'arealow') {
        temp.sort((a, b) => {
          return a.area - b.area
        })
      }
      if (this.sort === 'areahigh') {
        temp.sort((a, b) => {
          return b.area - a.area
        })
      }
      return temp.slice(0, this.showing)
    }
  }
}
</script>

Thank you very much.

I create a puted to make the "show more" button disappear when the total data is equal to showing data. But I cannot find any method to fix the issue after VueJS v3.6 introduced this ESlint rule. How can I fix it?

<template>

<div class="row sorting">
 <select v-model='sort' class="form-control" id="sorting">
  <option value="">Default</option>
  <option value="rentlow">Rent (ascending)</option>
  <option value="renthigh">Rent (descending)</option>
  <option value="arealow">Area (ascending)</option>
  <option value="areahigh">Area (descending)</option>
 </select>
</div>

The above is sorting properties, and the below is the axios API calling data. And I use the v-for.

<div class="row">
 <div v-for='(property, idx) in filteredproperties' :key='idx' class='col-md-6 text-left'>
  <img v-if='property.thumbnail' :src='backendurl + property.thumbnail.url'>
  <img v-if='!property.thumbnail' src='pictures/inner.png'>
  <h4>${{ property.rent }} / mo</h4>
  <h3>{{ property.title }}</h3>
  <span> {{ property.address }}</span>
  <div>{{ property.area }}
  <br>{{ property.room }}
  <br>{{ property.livingroom }}
  <br>{{ property.date }}
 </div>
 <button @click='showmore' v-if='totalblog > showing'>Show More</button>
</div>

<form>
 <div class="form-group">
  <label for="exampleFormControlInput1">address</label>
  <input type="text" v-model='filtereddata.title' class="form-control" id="exampleFormControlInput1">
 </div>
 <div class="form-group">
  <label for="exampleFormControlSelect1">District</label>
  <select class="form-control" v-model='filtereddata.district' id="exampleFormControlSelect1">
   <option value="all"> All </option>
   <option value="dis1">District 1</option>
   <option value="dis2">District 2</option>
   <option value="dis3">District 3</option>
  </select>
 </div>
 <button type="submit" class="btn btn-primary mt20">Search</button>
</form>

</template>

the javascript which controls the filter, sort, and button. The problem is that I cannot use "this.totalblog = temp.length" as it says an unexpected side-effect. I don't how I can disappear the show more button when all data is loaded. Any alternative?

<script>
export default {
  data () {
    return {
      frontendurl: process.env.frontendurl,
      backendurl: process.env.backendurl,
      filtereddata: {
          title: '',
          district: 'all'
      },
      sort: '',
      showing: 2,
      totalblog: ''
    }
  },
  async asyncData ({ $axios }) {
    const properties = await $axios.$get(process.env.backendurl + '/properties')
    return { properties }
  },
  methods: {
    showmore () {
      this.showing = this.showing + 2
    }
  },
  puted: {
    filteredproperties () {
      let temp = ''
      if (this.filtereddata.district === 'all') {
        temp = this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title))
      } else {
        temp = this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title) && x.district === this.filtereddata.district)
      }
      this.totalblog = temp.length /* unexpected side effect */
      /* sorting algorithm */
      if (this.sort === 'rentlow') {
        temp.sort((a, b) => {
          return a.rent - b.rent
        })
      }
      if (this.sort === 'renthigh') {
        temp.sort((a, b) => {
          return b.rent - a.rent
        })
      }
      if (this.sort === 'arealow') {
        temp.sort((a, b) => {
          return a.area - b.area
        })
      }
      if (this.sort === 'areahigh') {
        temp.sort((a, b) => {
          return b.area - a.area
        })
      }
      return temp.slice(0, this.showing)
    }
  }
}
</script>

Thank you very much.

• javascript
• vue.js
• puted-properties
• side-effects

Share Improve this question Follow asked Jun 17, 2021 at 10:08 Alexander LouisAlexander Louis 2111 silver badge22 bronze badges 1

• Fix it by NOT doing this.totalblog = temp.length - not sure what else you could do - besides making filteredproperties a method rather than a puted – Jaromanda X Commented Jun 17, 2021 at 11:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

ESLint throws this warning (or error - depending on your setup), because an unwanted side-effect is there in your puted property, namely: you set the totalblog data attribute of your ponent.

Computed values (although presented as functions) are not supposed to change anything that's outside of their scope.

There are a couple of solutions for your problem, though:

0. Just leave it be

If it's a warning, then you can live with it. If you are SURE you want this, then cope with the warning by simply ignoring it. Not a nice thing to do, but warnings are warnings: they may cause problems, but that's all.

1. Remove the ESLint rule

Just add // eslint-disable-next-line vue/no-side-effects-in-puted-properties in the line above the line that produces the problem. (More on this here.)

2. Have a better code structure

Something like this, for example:

<script>
export default {
  data() {
    filtereddata: {
      title: '',
      district: 'all'
    },
    showing: 2,
    sort: '',
  },
  puted: {
    totalblog() {
      return this.temp.length
    },
    temp() {
      if (this.filtereddata.district === 'all') {
        return this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title))
      } else {
        return this.properties.filter(x => x.title.toLowerCase().includes(this.filtereddata.title) && x.district === this.filtereddata.district)
      }
    },
    filteredproperties() {
      return this.sortProperties(this.temp)
    },
  },
  methods: {
    sortProperties(list) {
      let temp = [...list]
      if (this.sort === 'rentlow') {
        temp.sort((a, b) => {
          return a.rent - b.rent
        })
      }
      if (this.sort === 'renthigh') {
        temp.sort((a, b) => {
          return b.rent - a.rent
        })
      }
      if (this.sort === 'arealow') {
        temp.sort((a, b) => {
          return a.area - b.area
        })
      }
      if (this.sort === 'areahigh') {
        temp.sort((a, b) => {
          return b.area - a.area
        })
      }
      return temp.slice(0, this.showing)
    },
  },
}
</script>