使用 Vue.js 將數組長度增加和減少到輸入范圍值

Question

我正在使用Vue.js構建客戶端的范圍過濾器。 我正在使用類型為range的input標簽，它將過濾客戶端總length 。 我已經能夠將input的值鏈接到 ** clients ** 數組，但它僅在減小范圍時才有效，一旦我嘗試增加input的值，它就不會重新渲染clients 。

模板：

<div id="app">
  <input @input="filteredClients" type="range" min="0" max="10" v-model="clientTotal" />
  <ul>
    <li v-for="(client, index) in clients" :key="index">{{ client }}</li>
  </ul>
</div>

JavaScript：

const app = new Vue({
  el: "#app",
  data: {
        clientTotal: 10,
        clients: [
            'John Snow',
            'Cullen Bohannon',
            'Jamie Lannister',
            'Jane Doe',
            'Jamie Fraser',
            'John Dow',
            'Claire Fraser',
            'Frank Underwood',
            'Tony Stark',
            'Client Eastwood'
        ],
    },
    mounted() {
        this.filteredClients()
    },
    computed: {
        filteredClients() {
            this.clients.length = this.clientTotal
        }
    }
})

您可以查看此代碼示例。

Answer 1

這是因為在您的計算中，當您使用this.clients.length = this.clientTotal時，您正在縮短數組，所以當您再次增加時，您已經失去了列表中的所有其他客戶端。

您的過濾器應該return this.clients.slice(0, this.clientTotoal); 並且您的列表應該使用新的計算數組。

這樣，您將返回一個新數組而不是破壞舊數組。

Answer 2

您需要以不同的方式處理此問題。 通過簡單地更改長度，您實際上是從 clients 數組中刪除元素。 然后，當您再次增加長度時，您只是在數組中創建空槽。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length

這里有一個建議： filteredClients現在變成了一個新的映射數組。 也不需要在范圍輸入的input事件上調用它； 它是一個計算屬性，因此它只會在其任何反應性依賴項（ clientTotal ）更改時更新。

  <input type="range" min="0" max="10" v-model="clientTotal" />
  <ul>
    <li v-for="(client, index) in filteredClients" :key="index">{{ client }}</li>
  </ul>
</div>

const app = new Vue({
  el: "#app",
  data: {
    clientTotal: 10,
    clients: [
      'John Snow',
      'Cullen Bohannon',
      'Jamie Lannister',
      'Jane Doe',
      'Jamie Fraser',
      'John Dow',
      'Claire Fraser',
      'Frank Underwood',
      'Tony Stark',
      'Client Eastwood'
    ],
  },
  computed: {
    filteredClients() {
      return this.clients.slice(0, this.clientTotal);
    }
  }
})

編輯：對於這種情況， slice實際上比map更簡單、更合適，正如 Neil.Work 在另一個答案中所建議的那樣。