How to modify the value in vue request data

This time I will show you how to modify the value in the vue request data, what are the precautions for modifying the value in the vue request data, the following is a practical case, let's take a look.

Due to JavaScript limitations, Vue cannot detect the following changes to the array:

When you use the index When setting an item directly, for example: vm.items[indexOfItem] = newValue

When you modify the length of the array, for example: vm.items.length = newLength

in

<template>
 <p>
  <ul>
   <li v-for = " (item,index) in list" v-text=&#39;`${item} - ${index} `&#39;></li>
  </ul>
  <button @click="change3">改变数组第2个值,改成0</button>
  <button @click="change4">改变数组第2个值,改成5</button>
 </p>
</template>
<script>
import Vue from 'vue'
export default {
 data () { 
  return {
   list : [ 1, 2, 3, 4],
   list2 : [ 7, 8, 9, 0 ]
  }
 },
 methods : {
  //通过下标来改变整个数组里的值也是行不通的
  changeList () {
   this.list[2] = 3
  },
  //通过数组长度改变改个数组里的值是行不通的
  changeList2 () {
   this.length = 1
  },
  //第一我们可以通过，vue.set实列方法来改变，但我们要在开头再引一入下vue包
  // 1 第一个值代表需要改变的数组
  // 2 第二个代表改变那一项
  // 3 第三个代表改成什么值
  //样式语法 Vue.set(example1.items, indexOfItem, newValue)
  change3 () {
   Vue.set(this.list,1,0)
  },
  //通过 Array.prototype.splice 数组原型上的方法来改变整个数组的长度或者内容
  //这个方法大家肯定常用，我就不细说了
  change4 () {
   this.list.splice(1,1,5)
  }
 }
}
</script>

Because of the operation problem, I wrote comments directly in the code, so that everyone can clearly understand how to change the length of the array and change a certain element of the subscript through those methods.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to update the array with $set in vue.js

How to move the array in vue.js Position and update the view

The above is the detailed content of How to modify the value in vue request data. For more information, please follow other related articles on the PHP Chinese website!