The array brought by vue.js from the previous page is compared with the current list array. If the key value is the same, add the color. Click to delete the color.

question 1: when initializing the page, you need to determine whether the value of the arr2 array is the same as that of the arr array, and if so, add the corresponding background color
arr2: [

]. 
{key:"",text:""},
{key:"",text:""},
{key:"",text:""},
{key:"",text:""},

]
Picture

clipboard.png

question 2: when you click a value in the list (such as social insurance and house fund), add the corresponding background color, and click again to delete the background color

the link to the question is here
https://jsfiddle.net/xiyanzi/.

Vue.js
Feb.17,2022 
<div id="app">
  <label
      v-for="item in arr" :class="{'active': list.indexOf(item.key) > -1}">
    {{ item.text }}
    <input type="checkbox" v-model="list" :value='item.key'/>
  </label>
</div>

the onClick method is removed, css adds an input {display:none}, and the
initialization code is as follows: 

mounted: function() {
    let self = this;
    let arrKeys = self.arr.map((item) => item.key),
        arr2Keys = self.arr2.map((item) => item.key); 
    self.list = arr2Keys.filter((item) => arrKeys.indexOf(item) > -1);
}

Previous: About the question that element-ui popover pops up

Next: Binding keyboard events to non-input elements in vue

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu